How can I reset the counter to 1 each time my labels changes?

I have this code that is supposed act as a breathing exercise counting as follow:

8 second inhale 
8 second "hold inhale"
12 second "exhale"
8 second "hold exhale" 

everything is working fine except the counter will increment without resetting to 1. it should be, e. g. 1 to 8 and then 1 to 8 again and then 1 to 12 and so on.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Function to start the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 1;

  // Interval for the timer
  var interval = setInterval(function() {
    // Update the timer display and label
    timer.textContent = count;

    if (count <= 8) {
      label.textContent = 'Inhale';
    } else if (count <= 16) {
      label.textContent = 'Pause Inhale';
    } else if (count <= 28) {
      label.textContent = 'Exhale';
    } else if (count <= 36) {
      label.textContent = 'Pause Exhale';
    }

    // Increment count
    count++;

    // Stop the timer after reaching 8, 8, 12, 8 pattern
    if (count === 45) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Start the timer initially
startTimer();

<!-- language: lang-css -->

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<!-- language: lang-html -->

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

<!-- end snippet -->

You should add another variable to hold each step counter, like this.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Function to start the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 0;
  // Variable 'stepCount' to hold each step counter
  var stepCount = 0;

  // Interval for the timer
  var interval = setInterval(function() {
    // Update the timer display and label


    if (count === 0) {
      label.textContent = 'Inhale';
    } else if (count === 8) {
	  // reset stepCount to 0
	  stepCount = 0;
      label.textContent = 'Pause Inhale';
    } else if (count === 16) {
	  // reset stepCount to 0
	  stepCount = 0;
      label.textContent = 'Exhale';
    } else if (count === 28) {
	  // reset stepCount to 0
	  stepCount = 0;
      label.textContent = 'Pause Exhale';
    }
	
    // Increment count
    count++;
	// Increment stepCount
	stepCount++;
	//You show here the counter
    timer.textContent = stepCount;

    // Stop the timer after reaching 8, 8, 12, 8 pattern
    if (count === 36) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Start the timer initially
startTimer();

<!-- language: lang-css -->

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<!-- language: lang-html -->

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

<!-- end snippet -->

Use different variables for the count of the current action and the length of the entire cycle.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Function to start the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  label.textContent = 'Inhale';
  var count = 1;
  var segcount = 1;

  // Interval for the timer
  var interval = setInterval(function() {
    // Update the timer display and label
    timer.textContent = segcount;

    if (count == 8) {
      label.textContent = 'Pause Inhale';
      segcount = 0;
    } else if (count == 16) {
      label.textContent = 'Exhale';
      segcount = 0;
    } else if (count == 28) {
      label.textContent = 'Pause Exhale';
      segcount = 0;
    }

    // Increment count
    count++;
    segcount++;

    // Stop the timer after reaching 8, 8, 12, 8 pattern
    if (count === 45) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Start the timer initially
startTimer();

<!-- language: lang-css -->

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<!-- language: lang-html -->

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

<!-- end snippet -->

You could use a finite-state machine (https://en.wikipedia.org/wiki/Finite-state_machine):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Function to start the timer
function startTimer() {

  const timer = document.getElementById('timer');
  const label = document.getElementById('label');
  let count = 1;
  
  const states = Object.entries({
    'Inhale': 8, 
    'Pause Inhale': 8, 
    'Exhale': 12, 
    'Pause Exhale': 8
  }).map(([label, duration]) => ({label, duration}));
  let state = 0;
 
  const syncUI = () => {
    label.textContent = states[state].label;
    timer.textContent = count;
  };
  
  syncUI();
  
   // Interval for the timer
  return interval = setInterval(function() {

    // Increment count
    count++;

    // Update the timer display and label
    timer.textContent = count;

    if (count > states[state].duration) {
      state++;
      if(state === states.length){
        state = 0;
      }
      count = 1;
      syncUI();
    }

  }, 1000); // 1000 milliseconds = 1 second
}

// Start the timer initially
startTimer();

<!-- language: lang-css -->

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<!-- language: lang-html -->

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

<!-- end snippet -->

The code is doing exactly what you are telling it to (which is always the case of course), as there is nothing in your code telling the displayed count to reset. One way you could implement this is to have a separate count called displayedCount that resets when the hidden count reaches specific numbers, like this:

// Function to start the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 1;
  var displayedCount = 1;

  // Interval for the timer
  var interval = setInterval(function() {
    // Update the timer display and label
    timer.textContent = displayedCount;

    if (count <= 8) {
      label.textContent = 'Inhale';
    } else if (count <= 16) {
      label.textContent = 'Pause Inhale';
    } else if (count <= 28) {
      label.textContent = 'Exhale';
    } else if (count <= 36) {
      label.textContent = 'Pause Exhale';
    }

    // Increment count
    count++;
    if (count === 9 || count === 17 || count === 29 || count === 37) {
      displayedCount = 1;
    } else {
      displayedCount++;
    }

    // Stop the timer after reaching 8, 8, 12, 8 pattern
    if (count === 45) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Start the timer initially
startTimer();