Dynamic Form Insert

example

Form:

<div id="main">
    <table class="table table-stripped variant_range">
        <thead>
            <tr>
                <th><label for="variant"><strong>Variant </strong></label></th>
                <th><label><strong>Unit (kgs/grms)</strong></label></th>
                <th><label><strong>Price</strong> (<i class="fa fa-inr"></i>)</label></th>
                <th>
                    <input type="hidden" id="count" name="count" value="1">
                    <a class="btn btn-sm btn-success" href="javascript:void(0)" onclick="addData()" ><i class="fa fa-plus-circle"></i> Add Item</a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="text" class="form-control" name="variant1" value="{{ old('variant1') }}" />
                </td>
                <td>
                    <select class="form-control" name="unit1" id="unit1">
                        @if( old('unit1') == 1)
                        <option value="1" selected> kgs </option>
                        <option value="2" > grms </option>
                        @else
                        <option value="1"> kgs </option>
                        <option value="2" selected> grms </option>
                        @endif
                    </select>
                </td>
                <td>
                    <input type="text" class="form-control" name="price1" value="{{ old('price1') }}" />
                </td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

Javascript:

<script type="text/javascript">
  
    function addData() {
        var cnt = $("#count").val();
        cnt++;
        $("#main tbody").append('<tr class="units' + cnt + '"><td><input type="text" class="form-control" name="variant' + cnt + '" id="variant' + cnt + '" value="" /></td><td><select class="form-control" name="unit' + cnt + '" id="unit' + cnt + '"><option value="1"> kgs </option><option value="2" selected> grms </option></select></td><td><input type="text" class="form-control" name="price' + cnt + '" id="price' + cnt + '" value=""/></td><td><a href="javascript:void(0)" class="removeDivTag text-danger" id="units' + cnt + '"><i class="fa fa-trash fa-lg"></i></a></td></tr>');
        $("#count").val(cnt);
    }
    $(document).on("click", ".removeDivTag", function () {
        $("." + $(this).attr('id')).remove();
    });
</script>

Save in database:

$inputs_details = [];for ($count = 1; $count <= $request['count']; $count++) {    //add    if(isset($request['variant'.$count])) {        $inputs_details['productID'] = $newProductID[0]->product_id;            if($request['unit'.$count] == 2 ){                $inputs_details['variant']  = number_format(($request['variant'.$count])/1000,3);            }            else{                $inputs_details['variant']  = $request['variant'.$count];            }        $inputs_details['unit']         = $request['unit' . $count];        $inputs_details['price']        = $request['price' . $count];        $inputs_details['created_by']   = $request->session()->get('full_name');
        $this->_objProducts->addProductVariantDetails($newProductID[0]->product_id, $inputs_details['variant'], $inputs_details['unit'], $inputs_details['price'], $inputs_details['created_by']);    }}