How to use each array value on each for cycle (Same quantity)

I have the following array called equipos_seleccionados

["12 - v4", "100 - v500"]

This is how the frontend looks:

As you can see, i automatically generate as many textbox as the value on inputs on the head section.

GOAL: I would like to use (on this case) the value 12 – v4 to the first 2 elements (Selects) and the value 100 – v500 for the next 4 elements (Selects).

This is the code i have so far:

result["cantidad_seriado"].forEach(function(entry) {

    for (var i = 0; i < entry; i++) {

        div_hr1.append("<select class='form-control' id='selected_equipo_seriado' name='selected_equipo_seriado' required='required' disabled><option selected value=''>" + equipos_seleccionados + "</option></select><br>");

        div_hr2.append(`

      <input class="form-control" id="nro_serie_seriado" name="nro_serie_seriado" type="number" required="required" placeholder="Nro de serie"><br>
        
    `);

    };

    div_hr1.append(`

      <hr class="sidebar-divider" style="border-color:blue;">

    `);

    div_hr2.append(`

      <hr class="sidebar-divider" style="border-color:blue;">

    `);

});**

This is how it should looks:

Answer

You can print just the element in equipos_seleccionados that is in the same position as result[“cantidad_seriado”] via the overload that uses the index of the forEach function.

You just need to change the .forEach(function(entry)) for .forEach(function(entry, index))

var equipos_seleccionados = ["12 - v4", "100 - v500"]
div_hr1 = document.getElementById('div_hr1')
div_hr2 = document.getElementById('div_hr2')

var result = ["2", "3"]

result.forEach(function(entry, index) {

  console.log(entry)
    for (var i = 0; i < entry; i++) {

        div_hr1.innerHTML += "<select class='form-control' id='selected_equipo_seriado' name='selected_equipo_seriado' required='required' disabled><option selected value=''>" + equipos_seleccionados[index] + "</option></select><br>"

        div_hr2.innerHTML += `

      <input class="form-control" id="nro_serie_seriado" name="nro_serie_seriado" type="number" required="required" placeholder="Nro de serie"><br>
        
    `

    }

    div_hr1.innerHTML += `

      <hr class="sidebar-divider" style="border-color:blue;">

    `

    div_hr2.innerHTML += `

      <hr class="sidebar-divider" style="border-color:blue;">

    `

});

<div id="div_hr1" style="width=50%; display:inline-block;"></div>
<div id="div_hr2" style="width=50%; display:inline-block;"></div>

This works when both of your arrays come in the same order, in this case “2” is for “12 – v4” and “3” for “100 – v500”. If you don’t want to depend on the order of the items in both arrays you can use a dictionary based structure instead of that array, so you can have something like this:

var quantityPerEquipment = { "12 - v4": 2, "100 - v500": 3 }

var equipos_seleccionados = ["12 - v4", "100 - v500"]
div_hr1 = document.getElementById('div_hr1')
div_hr2 = document.getElementById('div_hr2')

Object.keys(quantityPerEquipment).forEach(function(entry) {

  console.log(entry)
    for (var i = 0; i < quantityPerEquipment[entry]; i++) {

        div_hr1.innerHTML += "<select class='form-control' id='selected_equipo_seriado' name='selected_equipo_seriado' required='required' disabled><option selected value=''>" + entry + "</option></select><br>"

        div_hr2.innerHTML += `

      <input class="form-control" id="nro_serie_seriado" name="nro_serie_seriado" type="number" required="required" placeholder="Nro de serie"><br>
        
    `

    }

    div_hr1.innerHTML += `

      <hr class="sidebar-divider" style="border-color:blue;">

    `

    div_hr2.innerHTML += `

      <hr class="sidebar-divider" style="border-color:blue;">

    `

});

<div id="div_hr1" style="width=50%; display:inline-block;"></div>
<div id="div_hr2" style="width=50%; display:inline-block;"></div>

That will ensure that your elements always match.