select2 example

<div class="card">
    <div class="header bg-orange">
        <h2>Form Kelola Data Daftar Belanja</h2>
    </div>
    <div class="body">
        <div class="table-responsive">
            <a id="addCart" href="javascript:void(0);" class="btn btn-lg bg-black waves-effect waves-light">Tambah Produk</a>
            <hr>
            <table style="width:100%" id="tableAjaxcategory" class="table table-bordered">
                <thead>
                    <tr>
                        <th width="50%">Produk</th>
                        <th>Jumlah Pembelian</th>
                        <th>Satuan</th>
                        <th colspan="2">Harga Beli</th>
                    </tr>
                </thead>
                <tbody id="listCart"></tbody>
            </table>
        </div>
    </div>
</div>

<script>
    let id = 0;
    $(document).ready(function() {
        if (id < 1) $("#addCart").trigger("click");
    });

    $(document).on("click", "#addCart", function(e) {
        e.preventDefault();
        addCart();
    });

    $(document).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent().parent().remove();
    });

    function initliaizeSelec2() {
        $('.multiSelect' + id).select2({
            width: 'resolve',
            theme: "classic"
        });
    }

    function addCart() {
        let rowProduct = `
            <tr style="background-color:#FAFBFC;">
                <td>
                    <select style="width:100%" name="inventory_id" class="multiSelect` + id + ` form-control" required>
                        <option value="">Silahkan Pilih Produk</option>
                        <?php
                        foreach ($dataProduct as $product) {
                            echo "<option value='" . $product->inventory_id . "'>" . $product->product_name . " - " . $product->brand_name . "</option>";
                        }
                        ?>
                    </select>
                </td>
                <td>
                    <input type="text" id="transaction_detail_request_qty" name="transaction_detail_request_qty" class="form-control" required>
                </td>
                <td>kg</td>
                <td>
                    <input type="text" id="transaction_detail_new_price" name="transaction_detail_new_price" class="form-control" required>
                </td>
                <td>
                    <a href="javascript:void(0);" class="delete pull-right btn bg-red waves-effect">
                        <i class="material-icons">delete</i>
                    </a>
                </td>
            </tr>
        `;

        $("#listCart").append(rowProduct);

        initliaizeSelec2();

        id++;
    }
</script>