JavaScript Using Clone Div Add or Remove

JavaScript Using Clone Div Add or Remove

<div>

                                    <div class="row" id="contentOrBody" >

                                        <div class="col-md-3">

                                            <div class="mb-3" id="eee">

                                                <label for="validationCustom02" class="form-label">Name</label>

                                                <input type="text" required data-row="0" data-name="name"                 name="name" class="form-control" id="name0" placeholder="Enter Name" value="">                                               

                                            </div>

                                        </div>

                                        <div class="col-md-3">

                                            <div class="mb-3" id="eee1">

                                                <label for="validationCustom02" class="form-label">Docx</label>

                                                <input type="file" data-row="0" data-name="formFile" id="formFile"  name="formFile" class="form-control">                                                

                                            </div>

                                        </div>

                                        <div class="col-md-3">

                                            <div class="mb-3" id="eee2">

                                                <label for="validationCustom02" class="form-label">Rollno</label>                  

                                                <select name="rollno" data-row="0" data-name="rollno" id="rollno0" class="form-control" required>

                                                    <option value="">Select</option>

                                                    <option>1</option>

                                                    <option>2</option>

                                                </select>                                              

                                            </div>

                                        </div> 

                                        <div class="col-md-3 mt-4">

                                            <button  class="btn btn-primary btn-sm pull-right" type="button" onclick="addNewRow('contentOrBody');"> + Add Row </button>

                                            <button  class="btn btn-danger btn-sm pull-right" data-row="0" data-name="removebtn" id="removebtn" type="button" onclick="removeNewRow(this);"> + Remove Row </button>                                                                                  

                                        </div>

                                    </div>

                                </div>

<script>

function addNewRow(content_id, label_checkbox = '') {

    var container = $("div#" + content_id+":last");

    container.find("select").each(function(index)

    {

        $(this).select2('destroy');

    });

    var clonedDiv = container.clone().find("input, textarea, select, button, checkbox, radio, label").each(function() {

        var i = $(this).data('row') + 1;

        var id = $(this).data('name') + i;

        var label_for;       

        if (label_checkbox) {

            label_for = $(this).data('name') + i;

            $(this).val('').attr({

                'id': id,

                'data-row': i,

                'for': label_for

            });

        } else {

            $(this).val('').attr({

                'id': id,

                'data-row': i

            });

        }

    }).end(); 

    container.append(clonedDiv);

    $('select').select2();   

}

    function removeNewRow(e)

        {

          if(e.dataset.row != 0){

                $('#passport_number'+e.dataset.row).parent().parent().parent().remove();

          }

        }

</script>