How to reduce code of a conditional status / Progress step bar delivery

I'm receiving a status from the DB and I want to make or reduce this repetitive code for my step progress bar. state from the response can be: 1,2,3,4,5 for example, and I want to change the active class of my <li> tag to get this: I'm doing this for the third step: IMG HERE https://ibb.co/8zKg097

if(state == 1){
 <section class="progressSection">
      <div class="container">
        <ul class="progressbar" style="list-style-type:none;">
          <li class="active">Alta Encargo</li>
          <li >Confeccion técnico</li>
          <li>Supervisión</li>
          <li>Pdte. Generar Imp. </li>
          <li>Salida</li>
        </ul>
      </div>
    </section>
} else if(state == 2){
  <section class="progressSection">
      <div class="container">
        <ul class="progressbar" style="list-style-type:none;">
          <li class="active">Alta Encargo</li>
          <li class="active">Confeccion técnico</li>
          <li>Supervisión</li>
          <li>Pdte. Generar Imp. </li>
          <li>Salida</li>
        </ul>
      </div>
    </section>
} else if {
  <section class="progressSection">
      <div class="container">
        <ul class="progressbar" style="list-style-type:none;">
          <li class="active">Alta Encargo</li>
          <li class="active">Confeccion técnico</li>
          <li class="active">Supervisión</li>
          <li>Pdte. Generar Imp. </li>
          <li>Salida</li>
        </ul>
      </div>
    </section>
} 

...(continued to the 5 conditions)

As you see I am adding manually all the active classes, I think there is a better way to reduce/structure my code, and of course if there is any recommendation I'll be grateful for it. sorry for my english, and thank you in advance.