jQuery automatically add +1 to the radio button name when the div containing the radio button is cloned

Question

I have a div named #step-content that I am cloning when the #btn-addProduct is clicked. This div contains radio buttons which gets cloned too.

My problem is when the radio button gets cloned now instead of two radio buttons we have four with the same name="packaging". This only allows me to select 1 out of 4.

What I want is that when the #step-content is cloned the cloned radio buttons should have a +1 added to its name which will make name="packaging" into name="packaging1".

My existing code is:

HTML:

<div class="form-step form-step1">
  <p class="step-number">1</p>
  <div id="step-content" class="step-content">

      <select name="product-type" form="cost-form">
        <option value="product" selected disabled>Product Type</option>
        <option value="product1">Product Type 1</option>
        <option value="product2">Product Type 2</option>
        <option value="product3">Product Type 3</option>
        <option value="product4">Product Type 4</option>
        <option value="product5">Product Type 5</option>
      </select>

      <input type="text" name="length" placeholder="Length" />
      <span class="x">X</span>
      <input type="text" name="width" placeholder="Width" />
      <span class="x">X</span>
      <input type="text" name="height" placeholder="Height" />
      <input class="weight" type="text" name="weight" placeholder="Weight" />

      <div class="packaging">
        <label for="packaging">Needs Packaging?</label>
        <input type="radio" name="packaging" value="yes" checked /> yes
        <br />
        <input type="radio" name="packaging" value="no" /> no
      </div>

      <input type="text" class="qty" name="qty" placeholder="QTY" />

  </div>
</div>
<!-- end form-step -->

<div class="add-product">
  <a id="btn-addProduct"><img src="img/add-product.png" alt="Add Another Product" /></a> <span>Add Another Product</span>
</div>

The jQuery that I am using to clone the div is as follows:

document.getElementById('btn-addProduct').onclick = duplicate;

var i = 0;
var original = document.getElementById('step-content');

function duplicate() {
  var clone = original.cloneNode(true); // "deep" clone
  clone.id = "step-content" + ++i; // there can only be one element with an ID
  original.parentNode.appendChild(clone);
}

JSFIDDLE link:
https://jsfiddle.net/qdryvgw7

Answer 1

Please check I've added one more line which is changing the name of the packaging radio button.

document.getElementById('btn-addProduct').onclick = duplicate;

var i = 0;
var original = document.getElementById('step-content');

function duplicate() {
  var clone = original.cloneNode(true); // "deep" clone
  clone.id = "step-content" + ++i; // there can only be one element with an ID
  
  original.parentNode.appendChild(clone);
  $("#" + clone.id).find(".packaging input").each(function() { this.name = this.name + i });
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-step form-step1">
  <p class="step-number">1</p>
  <div id="step-content" class="step-content">
    <p>
      <select name="product-type" form="cost-form">
        <option value="product" selected disabled>Product Type</option>
        <option value="product1">Product Type 1</option>
        <option value="product2">Product Type 2</option>
        <option value="product3">Product Type 3</option>
        <option value="product4">Product Type 4</option>
        <option value="product5">Product Type 5</option>
      </select>

      <input type="text" name="length" placeholder="Length" />
      <span class="x">X</span>
      <input type="text" name="width" placeholder="Width" />
      <span class="x">X</span>
      <input type="text" name="height" placeholder="Height" />
      <input class="weight" type="text" name="weight" placeholder="Weight" />

      <div class="packaging">
        <label for="packaging">Needs Packaging?</label>
        <input type="radio" name="packaging" value="yes" checked /> yes
        <br />
        <input type="radio" name="packaging" value="no" /> no
      </div>

      <input type="text" class="qty" name="qty" placeholder="QTY" />
    </p>
  </div>
</div>
<!-- end form-step -->

<div class="add-product">
  <a id="btn-addProduct"><img src="img/add-product.png" alt="Add Another Product" /></a> <span>Add Another Product</span>
</div>

Answer 2

Try this:

function duplicate() {
  var clone = original.cloneNode(true); // "deep" clone
  clone.id = "step-content" + ++i; // there can only be one element with an ID
  original.parentNode.appendChild(clone);
  //this will change name of the radio buttons under newly created step-content
  $("#step-content"+ i + " input:radio").attr("name", "packaging"+ i);
}

Fiddle