Lo que me sucede es que estoy agregando una fila de bootstrap con un select(mendiante MySQL y PHP estoy agregandole los options) y dos inputs dentro, hasta ahí todo normal. El problema es que cada vez que agrego una nueva fila con el select y los inputs, se agregan pero el select no tiene valores. No solo eso sino que los valores del primer select se duplican.
Ej. PRIMERA VEZ QUE AGREGO UNA FILA Seleccionar Valvula 2da automatica RF 150 Ladrillo
SEGUNDA VEZ QUE AGREGO UNA FILA Seleccionar Valvula 2da automatica RF 150 Ladrillo Valvula 2da automatica RF 150 Ladrillo
var counter = 1;
$("#addNewItem").click(function(){
if (counter < 1) {
counter = 1;
}
$('.col-sm-12.are-data').hide(50);
$(".row.products").append(
"<div class='row item "+counter+"'>" +
"<div class='col-sm-1 input-products'>" +
"<label for='id-item' style='text-align: center;margin: 0 48%;'>ID</label>" +
"<h5 name='id-item' id='id-item' class='id-item'>"+ counter +"</h5>" +
"</div>" +
"<div class='col-sm-7 input-products'>" +
"<label for='producto' style='text-align: center;'>DESCRIPCION PRODUCTO</label>" +
"<select class='text-center data' id='producto' name='producto["+counter+"]' style='width:100%;'><option value=''>Seleccionar</option></select>" +
"</div>" +
"<div class='col-sm-2 input-products'>" +
"<label for='cantidad' style='text-align: center;'>CANTIDAD</label>" +
"<input type='text' class='data' id='cantidad' name='cantidad["+counter+"]' style='width:100%;'>" +
"</div>" +
"<div class='col-sm-2 input-products'>" +
"<label for='unidad' style='text-align: center;'>UNIDAD</label>" +
"<input type='text' disabled name='unidad["+counter+"]' id='unidad' style='width:100%;'>" +
"</div>" +
"</div>").show(0);
counter++;
$.get("../../PHP/obrasselects.php",function (data){
//alert(data);
var resp = JSON.parse(data);
if (resp.status == 0) {
for (var a = 0; a < Object.keys(resp.productos).length; a++){
$("#producto").append($('<option value="' + resp.productos[a].id_producto + '">' + resp.productos[a].descripcion + '</option>'))
}
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row products"></div>
<button class="btn btnObras" type="button" id="addNewItem" style="width:35%;">AGREGAR</button>