I have some problem with my dynamic input, I want to add and delete the input but when I try to delete, the action delete the view that does not match with the view position, for example let's say I have a list like this
when I tried to delete input2 instead input1 deleted
My approach
html
<div class="row" id="list-barang-dipilih">
</div>
jquery
$('#tambah-barang').click(() => {
var idBarang = $('#option-barang option:selected').val()
var namaBarang = $('#option-barang option:selected').text().trim()
var jumlahBarang = $('#jumlah-barang').val()
var htmlElement = '<div class="col-md-12" id="barang-baru">'+
'<div class="col-md-6">'+
'<div class="form-group">'+
`<input type="text" class="form-control" id="nama-barang-dipilih" name="nama_barang" placeholder="Nama barang" value="${namaBarang}" readonly>`+
`<input type="hidden" class="form-control" id="id-barang-dipilih" name="id_barang" placeholder="id_barang" value="${idBarang}" readonly>`+
'</div>'+
'</div>'+
'<div class="col-md-4">'+
'<div class="form-group">'+
`<input type="text" class="form-control" id="jumlah-barang-dipilih" name="jumlah_barang" placeholder="Jumlah item.." value="${jumlahBarang}" readonly>`+
'</div>'+
'</div>' +
'<div class="col-md-2">'+
'<div class="form-group">'+
'<button type="button" class="close" aria-label="Close">'+
'<span aria-hidden="true" id="hapus-barang">×</span>'+
'</button>'+
'</div>'+
'</div>'+
'</div>'
$('#list-barang-dipilih').append(
htmlElement
)
})
$(document).on('click', '#hapus-barang', ()=>{
$('#barang-baru').remove()
})
so the id="tambah-barang" for add the field and id="hapus-barang" for remove field
also after the input is added and user fill the input, I want to get all the data from all input
I already solve the problem, i just add the index to the wrapper when I append the view
so it become like this
const listItem = () => {
var i = 0;
$('#tambah-barang').click(() => {
i++;
var idBarang = $('#option-barang option:selected').val()
var namaBarang = $('#option-barang option:selected').text().trim()
var jumlahBarang = $('#jumlah-barang').val()
var htmlElement = `<div class="col-md-12" id="barang-baru-${i}">`+
'<div class="col-md-6">'+
'<div class="form-group">'+
`<input type="text" class="form-control" id="nama-barang-dipilih" name="nama_barang" placeholder="Nama barang" value="${namaBarang}" readonly>`+
`<input type="hidden" class="form-control" id="id-barang-dipilih" name="id_barang" placeholder="id_barang" value="${idBarang}" readonly>`+
'</div>'+
'</div>'+
'<div class="col-md-4">'+
'<div class="form-group">'+
`<input type="text" class="form-control" id="jumlah-barang-dipilih" name="jumlah_barang" placeholder="Jumlah item.." value="${jumlahBarang}" readonly>`+
'</div>'+
'</div>' +
'<div class="col-md-2">'+
'<div class="form-group">'+
'<button type="button" class="close" aria-label="Close">'+
`<span aria-hidden="true" id="hapus-barang" onClick="onRemoveItem(${i})">×</span>`+
'</button>'+
'</div>'+
'</div>'+
'</div>'
$('#list-barang-dipilih').append(
htmlElement
)
})
$('#save-transaksi').click(() => {
$('input[id^="nama-barang-dipilih"]').each((input) =>{
var value1 = $('input[id^="nama-barang-dipilih"]').val()
console.log(value1)
})
})
}
function onRemoveItem(i) {
$(document).on('click', '#hapus-barang', ()=>{
$(#barang-baru-${i}).remove()
})
}