JSFiddle - React, Tailwind, and code Playground

by Arindam Nayak

HTML

<div id="MoreEmailDetails">
  <div class="form-group users">

    <input type="text" required="required" id="LeadEmailDetail0FirstName" value="" name="data[LeadEmailDetail][0][first_name]">
    <label for="LeadEmailDetail0FirstName">First Name</label>

    <input type="text" id="LeadEmailDetail0LastName" value="" name="data[LeadEmailDetail][0][last_name]">
    <label for="LeadEmailDetail0FirstName">First Name</label>

    <select id="LeadEmailDetail0CountryId" class="select-replace select2-offscreen" name="data[LeadEmailDetail][0][country_id]" tabindex="-1" title="Country">
      <option value="">Choose a country</option>
      <option value="2">SOUTHEASTERN EUROPE</option>
    </select>
    <label for="LeadEmailDetail0CountryId">Country</label>

    <input type="checkbox" id="LeadEmailDetail0PrimaryEmail" value="1" name="data[LeadEmailDetail][0][primary_email]">
    <label for="LeadEmailDetail0PrimaryEmail">Primary Email</label>
  </div ">
    	</div">
  <div id="MoreEmails"></div>
  <input type="submit" value="Add More" id="addMoreEmail">

JavaScript

jQuery(function() {
      var currentCount = 0;
      jQuery('#addMoreEmail').click(function() {
        currentCount = cloning('#MoreEmailDetails', '#MoreEmails', currentCount);
        return false;
      });

      function cloning(from, to, counter) {
        var clone = $(from).clone();
        //console.log(clone);
        counter++;

        // Replace the input attributes:
        clone.find(':input').each(function() {
            if(jQuery(this).attr('name')) {
          var name = jQuery(this).attr('name').replace(0, counter);
          var id = jQuery(this).attr('id').replace(0, counter);
          jQuery(this).attr({
            'name': name,
            'id': id
          }).val(); }
        });


        // Replace the label for attribute:
        clone.find('label').each(function() {
          var newFor = jQuery(this).attr('for').replace(0, counter);
          jQuery(this).attr('for', newFor);
        });

        // Replace the text between html tags:
        clone = clone.html().replace(1, counter);
        jQuery(to).before(clone);

        return counter;
      }

    });