Duplicate form using jquery

Duplicate form using jquery

<form class=”duplicateForm”>

                    <div class=”row duplicate my-3″>

                        <div class=”col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4″>

                            <lable>Fixed Cost</lable>

                            <input type=”number” name=”owner_name[]” class=”form-control owner_name” />

                        </div>

 

                        <div class=”col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4″>

                            <lable>Urgent Cost</lable>

                            <input type=”number” name=”owner_shares[]” class=”form-control owner_shares” />        

                        </div>

                        

                        <div class=”col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4″>

                            <button type=”button” class=”btn btn-success addbtn”>Add</button> &nbsp; 

                            <button type=”button” class=”btn btn-danger dltbtn”>Delete</button>

                        </div>

</div>

                    </form><br/><br/>

                    

                </div>

            <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js”></script>

              <script>

                  $(document).ready(function(){

                       $(document).on(‘click’, ‘.addbtn’, function(){

                          $(‘.duplicateForm .duplicate:last-child’).clone().appendTo(‘.duplicateForm’);

                      });

                  });

                  $(document).ready(function(){

                      $(document).on(‘click’, ‘.dltbtn’, function(){

                         if($(‘.duplicateForm .duplicate’).length > 1){

                              $(this).parents(‘.duplicate’).remove();

                          }

                      });

                      

                  });

    

</script>

Leave a Reply