I have a dynamic table where I have a select that must be loaded with the amount of option depending on the number that I place in an input, that is to say that if I put 4 in the input, 4 options must be generated in my select, ok I have that but only It works for me in the first row since it is a dynamic table in the next row that is generated, it does not take the values of the options that should be generated.
This is my view to give you the idea:
And this is the problem that I get
This is the function of my table and select
<script>
var addButton = $('.addRow');
var wrapper = $('.tabla_autores');
$(addButton).click(function (e) {
var x = $("#cantidadAutoresReales").val();
var count = parseInt(x) + parseInt(1);
var tr = `<tr id='row[]'>
<td>
<input type='hidden' name='from_user_id[]' id='from_user_id[]' value='{{auth()->user()->id}}'>
<input type='hidden' value='{{\Carbon\Carbon::now();}}' name='hora_inicio[]' id='hora_inicio'>
<select class='form-control 'name='software_version[]' id='software_version[]' >
<option disabled value='' selected>== Seleccione ==</option>
@foreach($software as $sf)
<option value='{{$sf->id}}'>{{$sf->name_software}} - {{$sf->name_version}}</option>
@endforeach
</select>
</td>
<td>
<select class='form-control' name='producto[]' id='producto[]'>
<option disabled value='' selected>== Seleccione ==</option>
@foreach($productos as $items)
<option value='{{$items->id_producto}}'>{{$items->descripcion}}</option>
@endforeach
</select>
</td>
<td>
<select class=form-control name='instalador_asignado[]' id='instalador_asignado[]'>
<option disabled value='' selected>== Seleccione ==</option>
@foreach ($empleados as $emp)
<option value='{{ $emp->id }}'>{{ $emp->username }}</option>
@endforeach
</select>
</td>
<td>
<select name='pc_asignada[]' id='pcs'>
<option value='pc_1'>PC 1</option>
</select>
</td>
<td>
<select class='form-control' name='medio_instalacion[]' id='id_medio_instalacion' value='' >
<option disabled value='' selected>Seleccionar...</option>
@foreach ($medio_instalacion as $emp)
<option value='{{ $emp->id_medio_instalacion }}'>{{ $emp->descripcion }}
</option>
@endforeach
</select>
</td>
<td><input name='id_medio[]' class='form-control' type='text' autocomplete='off' required></td>
<td><input name='contraseña_medio[]' class='form-control' type='text' autocomplete='off' required></td>
<th><a href='javascript:void(0)' class='btn btn-danger deleteRow'>x</a></th>
</tr>`;
$('tbody').append(tr);
});
$('tbody').on('click', '.deleteRow', function(){
$(this).parent().parent().remove();
});
jQuery("#miinput").on("change", function() {
var cantidad = parseInt(jQuery(this).val());
jQuery("#pcs").empty();
for (i = 1; i <= cantidad; i++) {
jQuery("#pcs").append('<option value="pc_' + i + '">PC ' + i + '</option>"');
}
});
1.- The first thing is that you should not repeat ID's. When you add a row dynamically with the fixed id in the templates you are repeating them. At least you must change the select of the pc
of
for a class
2.- I would create a function that would return a string with the options, in this way
3.- Then in your add row function, here we will see how many "PCs" should be added to the options and we add them
4.- In your change event, when the input changes, now we change all the select's that may be
5.- As a final recommendation: Use Number instead of parseInt