i try to use select2 to make my select input easier to find data, here’s my js and html
<table class="mt-2.5">
<thead>
<tr>
<th>Item Name</th>
<th>Item Qty</th>
<th>Item Price</th>
<th>Item Total</th>
<th>Action</th>
</tr>
</thead>
<tbody id="items">
<tr id="items_sample">
<td>
<select name="items[]['inventory_id']" id="items[]['inventory_id']"
class="item_box w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary">
<option value="" disabled selected>Select Item</option>
@foreach($inventories as $inventory)
<option value="{{ $inventory->id }}">{{ $inventory->name }}
</option>
@endforeach
</select>
</td>
<td>
<input type="number" name="items[]['qty']" id="items[]['qty']"
class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary">
</td>
<td>
<input type="number" name="items[]['price']" id="items[]['price']"
readonly
class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary">
</td>
<td>
<input type="number" name="items[]['total']" id="items[]['total']"
readonly
class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary">
</td>
<td>
<center><a href="javascript:void(0)" onClick="removeItem(this)"
class="hover:text-primary" title="Remove Item"><i
class="fi fi-rr-trash"></i></a></center>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><b>Total</b></td>
<td colspan="2"><b id="total">Rp 0,00</b></td>
</tr>
</tfoot>
</table>
let’s focus on <select....
only with class item_box, and here’s my javascript with first select2 init
var items_sample = null; //variable to save html that i want to clone
$(document).ready(function () {
items_sample = $("#items_sample").html();
$('.item_box').select2(); //first select2 when dom is loaded
});
$("#addnewitem").click(function() {
$("#items").append("<tr>" + items_sample + "</tr>"); //append the cloned html
var current_item = $("#items").children().last(); //get latest html dom
current_item.find(".item_box").attr("class", "item_box_" + $("#items").children().length + " w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"); //rename the class to add _index, example item_box_2, item_box_3, item_box_n
$(".item_box_" + $("#items").children().length).select2(); //select2 ini for the cloned html
});
when the page is loaded, the first select2 .item_box
is a success, but when I try (let’s say click button #addnewitem to append cloned html to #items) to click button #addnewitem. the first select2 .item_box
is reset/becomes a normal select form and the select2 change to a new select form .item_box_2
.
how to fix it?