I have 2 fields in my form that I want to clone using jQuery, but the selecting html table structure got me confused on how to change the id and the value of my form field and also the label text. Here's the form field structure

<table>
 <tbody>
    <tr id="attribute-name">
      <td class="label"><label for="listing_qty">quantity</label></td>
      <td class="value">
        <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
      </td>
    </tr>
    <tr id="attribute-custom">
      <td class="label"></td>
      <td class="value">
        <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
      </td>
    </tr>
 </tbody>
</table>

I have 2 fields in my form that I want to clone using jQuery, but the selecting html table structure got me confused on how to change the id and the value of my form field and also the label text. Here's the form field structure

<table>
 <tbody>
    <tr id="attribute-name">
      <td class="label"><label for="listing_qty">quantity</label></td>
      <td class="value">
        <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
      </td>
    </tr>
    <tr id="attribute-custom">
      <td class="label"></td>
      <td class="value">
        <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
      </td>
    </tr>
 </tbody>
</table>

• javascript
• jquery
• html

3 Answers 3

You will need to clone the entire element and then update the id's, values, and text in the cloned element before inserting.

function appendClonedFormInput(el,
  newId,
  newInputId,
  newLabelText,
  newName,
  newValue) {
  // Clone and update id
  var $cloned = $(el)
    .clone()
    .attr('id', newId);
  // Update label
  $cloned.find('label')
    .attr('for', newInputId)
    .text(newLabelText);
  // Update input
  $cloned.find('input')
    .attr('id', newInputId)
    .attr('name', newName)
    .val(newValue);
  return $cloned.insertAfter(
    $('input').last().parents('tr'));
}


appendClonedFormInput('#attribute-name',
  'new-attribute-id',
  'new-inp-id',
  'New Label',
  'new_field',
  'new value');


appendClonedFormInput('#attribute-custom',
  'new-custom-id',
  'new-custom-inp-id',
  'New Custom',
  'new_custom',
  'new custom value');

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="attribute-name">
      <td class="label">
        <label for="listing_qty">quantity</label>
      </td>
      <td class="value">
        <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
      </td>
    </tr>
    <tr id="attribute-custom">
      <td class="label"></td>
      <td class="value">
        <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
      </td>
    </tr>
  </tbody>
</table>

You can clone the HTML element using .clone() jquery function and on the cloned HTML element perform all the jquery operation as we can perform on normal jquery selector.

Please check below working snippet. In snippet I have changed the label name and ids.

$(function(){
  var _counter = 1;
  $("#cloned_html").on("click",function(){
    var $button = $('#attribute-name').clone().prop("id","attribute-name-"+_counter);
    $button.find('#listing_qty').prop("id","listing_qty_"+_counter).val("quantity-"+_counter);
    
    $button.find("label").html("Quantity-"+_counter);
    var selector = '#attribute-name'
    if(_counter>1){
      selector = '#attribute-name-'+(_counter-1)
    }
    $($button).insertAfter(selector);  
    _counter++;
  });  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tbody>
    <tr id="attribute-name">
      <td class="label"><label for="listing_qty">quantity</label></td>
      <td class="value">
        <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
      </td>
    </tr>
    <tr id="attribute-custom">
      <td class="label"></td>
      <td class="value">
        <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
      </td>
    </tr>
 </tbody>
</table>
<button id="cloned_html">Clone</button>

You should separate the final render from the template. Another important part of your feature would be assign an unique number to pose ids and names.

I would suggest you to implement a solution like https://github./BorisMoore/jquery-tmpl

Put the template inside a script node with an Id then copy it's content and replace {} occurrences as you need.