generate.js

function addPackages(count) {
        $('#packages').empty();
        // console.log(count);
        var q = 0;
        for ( var i = 0; i < count; i++ ) {
            q++;
            let num = Math.floor((Math.random() * 10000) + 1);
            // This will loop x times
            let content = `
            <div class="col-xl-12 col-lg-9 col-md-9 col-sm-9 col-12" id="package${q}">
                <div class="card">
                    <div class="row" style="padding: 20px; padding-bottom: 50px;">
                        <div class="col-sm-12">
                            <div class="card-header"><h5 style="display: inline">Package ${q}</h5> <div class="float-right" style="margin-right: -20px;"><button onclick="addItem(${q}, ${num})" style="height: 29px;" class="btn btn-primary btn-sm" type="button">Add item</button></div></div>
                            <div class="card-body">
                            <div id="item_card_${q}">
                                    <div class="form-row align-items-center" id="package${q}_item_${num}">
                                        <div class="col-sm-4">
                                          <label class="" for="inlineFormInput">Item name</label>
                                          <input type="text" class="form-control mb-2" id="package${q}_item_${q}_item_name" placeholder="" name="package${q}_item_${q}_item_name[]">
                                        </div>

                                        <div class="col-sm-2">
                                          <label class="" for="inlineFormInput">Unit Price</label>
                                          <input type="number" class="form-control mb-2" id="inlineFormInput" placeholder="" value="0">
                                        </div>

                                        <div class="col-sm-2">
                                          <label class="" for="inlineFormInput">Qty</label>
                                          <input type="number" class="form-control mb-2" id="inlineFormInput" placeholder="" value="1">
                                        </div>

                                        <div class="col-sm-3">
                                          <label class="" for="inlineFormInput">Total Price</label>
                                          <input type="text" readonly disabled value="0.00" class="form-control mb-2" id="inlineFormInput" placeholder="">
                                        </div>
                                       
                                      
                                        <div class="col-sm-1">
                                          <button onclick="deleteItem(${q}, ${num})" type="submit" style="margin-top: 25px;
    margin-left: -4px;" class="btn btn-sm btn-outline-danger mb-2">Delete</button>
                                        </div>
                                        </div>
                                    </div>

                                    <div class="form-row align-items-center">
                                        <div class="col-sm-6">
                                          <label class="" for="inlineFormInput">Weight (Kg)</label>
                                          <input type="number" value="" class="form-control mb-2" id="inlineFormInput" placeholder="">
                                        </div>
                                      </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        `;

        $('#packages').append(content);

    }