CODEWITHSUNDEEP
javascriptphpjqueryhtmlwordpress
RLL
RLL

Reputation: 71

Incrementing the name attribute of cloned inputs in jquery

I have a specific section of a form(a select box and three checkboxes) that needs to be duplicated upon request. I have the clone of the div working as well as the incrementing of that specific div, but I am having issues incrementing the checboxes itself to make it unique.

Here is my HTML:

<div class="orgboxdupe" style="border: 1px solid lightgrey; padding-left:20px;padding-right:20px;padding-bottom:20px;margin-top:10px; width: 600px;">
   <h3>Add user to an organization</h3>
   <select id="orggroupadd" class="user_groupadd" name="user_orggroupadd[]">
      <option value="none">Select an organization</option>
      <option value="152">Test4</option>
      <option value="156">test9</option>
   </select>
   <br><br>Organization Admin (can view uploaded files): <input type="checkbox" name="orgadmincheckbox2"><br><br>c3 Access: <input type="checkbox" name="c3checkbox2"> c4 Access: <input type="checkbox" name="c4checkbox2">
</div>

On button click it creates a new orgboxdupe box with an incrementing ID but for some reason it increments the number on the first div checkboxes and not on the subsequent cloned checkboxes: Original Box that has wrong updated checkbox names

Here is my JS

//Portalorgs - add Users
//Vars
let  $addnewgroupbutton = jQuery( "#addnewgroup" );
let  $mainelement = jQuery("#orguserbox");
let  $dupebox = jQuery(".orgboxdupe");
let  $selectboxid = jQuery("#orggroupadd");
let   $checkboxes = jQuery("input[type='checkbox']");
let  $cloneindex = 1;

//Duplicating add organizations box for users - po-addusers.php
$addnewgroupbutton.click(function() {
    $cloneindex++;
    $dupebox.clone().appendTo($mainelement).attr("id","user_orggroupadd" + $cloneindex).find(':checked').attr('checked', false);
    $checkboxes.each(function(){
    jQuery(this).attr("name",jQuery(this).attr("name") + $cloneindex);
  });
  console.log($cloneindex);
});

Thanks for any help that can be provided.

Upvotes: 0

Views: 49

Answers (1)

PeterKA
PeterKA

Reputation: 24638

As noted by @Taplar $checkboxes references the original checkboxes. So they are the ones being updated each time there's a click.

You need to reference the checkboxes in the just copied clone; you can use chaining like so:

    ....
    .end().find(':checkbox').attr('name', function() {
        return this.name + $cloneindex;
    }); 


//Portalorgs - add Users
//Vars
let  $addnewgroupbutton = jQuery( "#addnewgroup" );
let  $mainelement = jQuery("#orguserbox");
let  $dupebox = jQuery(".orgboxdupe");
let  $selectboxid = jQuery("#orggroupadd");
let   $checkboxes = jQuery("input[type='checkbox']");
let  $cloneindex = 1;

//Duplicating add organizations box for users - po-addusers.php
$addnewgroupbutton.click(function() {
    $cloneindex++;
    $dupebox.clone().appendTo($mainelement).attr("id","user_orggroupadd" + $cloneindex).find(':checked').attr('checked', false)
    //operate on the close via method chaining
    .end().find(':checkbox').attr('name', function() {
        return this.name + $cloneindex;
    });
    /*$checkboxes.each(function(){
    jQuery(this).attr("name",jQuery(this).attr("name") + $cloneindex);
  });*/
  //console.log($cloneindex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addnewgroup">Add New Group</button>
<div id="orguserbox">
<div class="orgboxdupe" style="border: 1px solid lightgrey; padding-left:20px;padding-right:20px;padding-bottom:20px;margin-top:10px; width: 600px;">
   <h3>Add user to an organization</h3>
   <select id="orggroupadd" class="user_groupadd" name="user_orggroupadd[]">
      <option value="none">Select an organization</option>
      <option value="152">Test4</option>
      <option value="156">test9</option>
   </select>
   <br><br>Organization Admin (can view uploaded files): <input type="checkbox" name="orgadmincheckbox2"><br><br>c3 Access: <input type="checkbox" name="c3checkbox2">
   </div>
   </div>

Upvotes: 1

Related Questions