Jquery .clone() Repeater Parent/Child association issues to save SP list

Jquery .clone() Repeater Parent/Child association issues to save SP list

Will you help me with issues two issues with the following example, just create a custom list with 3 fields Title CustCity CurrCustomer and add the content editor webpart on the page.

1.  cant position when I click 'Add More' from child button.

2. When I click 'Submit' the item incorrect savings of records

items are not saving correctly. For example I have added 2 parents with no child should have saved 2 records but saved 4 records. Also, if I click more child, its not possible to track which child belongs to which parent. The reason because I cant associate who is whos child etc

Code:

<script type="text/javascript">

        function AddMore() {
            var repetFrom = $("#DataForms").find(".DataForm").first().clone();
            repetFrom.appendTo($("#DataForms"));
        }
           
        function AddMoreSub() {
            var repetFromSub = $("#DataFormsSub").find(".DataFormSub").first().clone();
            repetFromSub.appendTo($("#DataFormsSub"));
        }
       
        function Save() {
      var clientContext;
            var website;
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
            function sharePointReady()
         {
      clientContext = SP.ClientContext.get_current();
                website = clientContext.get_web().get_lists().getByTitle('Customer');
                    var title = $("#domainGroup").val();
                  $(".DataForm").each(function () {
        var custCity = $(this).find(".custCity").eq(0).val();
     
     
      $(".DataFormSub").each(function () {
            var currCustomer = $(this).find(".currCustomer").eq(0).val();
          var taskItemInfo = new SP.ListItemCreationInformation();
          this.newTask = website.addItem(taskItemInfo);
          this.newTask.set_item('Title', title);
          this.newTask.set_item('custCity', custCity);
          this.newTask.set_item('currCustomer', currCustomer);
       this.newTask.update();
          clientContext.executeQueryAsync(
          Function.createDelegate(this, onQuerySucceeded),
          Function.createDelegate(this, onQueryFailed)
          );
      });
     
     });
     function onQuerySucceeded() {
                        //alert('Item created: ' + this.newTask.get_id());
                        location.reload(true);
                    }
                    function onQueryFailed(sender, args) {
                        // alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                    }
   }
  }
< /script>
< table>
   <tbody>
      <tr>
         <td>Enter the domain group name </td>
         <td>
            <input class="domainGroup" id="domainGroup" type="text"/>
         </td>
      </tr>
      <tr>
         <td>Add More City? &#160;</td>
         <td>
            <input id="Button1" onclick="AddMore()" type="button" value="add more"/>
         </td>
      </tr>
   </tbody>
< /table>
< div id="DataForms">
   <div class="DataForm">
      <hr/>
      <table>
         <tbody>
            <tr>
               <td>Name</td>
               <td>
                  <input name="custCity" class="custCity" id="custCity" type="text"/>               
               </td>
            </tr>
            <tr>
               <td>Add more customer?</td>
               <td>
                  <input id="Button2" onclick="AddMoreSub()" type="button" value="add more"/>
               </td>
            </tr>
         </tbody>
      </table>
      <div id="DataFormsSub">
         <div class="DataFormSub">
            <table>
               <tbody>
                  <tr>
                     <td>Customer: &#160; &#160;&#160;&#160;&#160;&#160;&#160; &#160;&#160;&#160;&#160;&#160;&#160;&#160; &#160;&#160;&#160;&#160; </td>
                     <td>
                        <input name="currCustomer" class="currCustomer" id="currCustomer" type="text"/>
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </div>
< /div>
< hr/>
< input id="btnAdd" onclick="Save();" type="button" value="SUBMIT"/>

Will you please help?

Thanks

Shri