JSFiddle - React, Tailwind, and code Playground

by Noel Calonia

HTML

<div class="extraPersonTemplate">
  <div class="controls controls-row">
    <input class="span3" placeholder="First Name" type="text" name="firstname">
    <input class="span3" placeholder="Last Name" type="text" name="lastname">
    <select class="span2" name="gender">
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
    <a href="#" id="removeRow"><i class="icon-plus-sign icon-white"></i> Remove Row </a>
  </div>
</div>
<div id="container"></div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</a>

CSS

.extraPersonTemplate {
  display: none;
  /* visibility: invisible; */
}

JavaScript

$(document).ready(function() {
   $('#addRow').click(function() {
     $('<div/>', {
       'class': 'extraPerson',
       html: GetHtml()
     }).hide().appendTo('#container').slideDown('slow');
   });

   $(document).on('click', "#removeRow", function() {
     var len = $('.extraPerson').length;
     if (len <= -1) {
       $('.extraPerson [name=firstname]').slideUp('slow');
       $('.extraPerson [name=lastname]').slideUp('slow');
       $('.extraPerson [name=gender]').slideUp('slow');
       $(this).fadeOut('slow');
     } else {
       $('.extraPerson [name=firstname' + (len - 1) + ']').slideUp('slow');
       $('.extraPerson [name=lastname' + (len - 1) + ']').slideUp('slow');
       $('.extraPerson [name=gender' + (len - 1) + ']').slideUp('slow');
       $(this).fadeOut('slow');
     }
   });
 });

 function GetHtml() {
   var len = $('.extraPerson').length;
   var $html = $('.extraPersonTemplate').clone();
   $html.find('[name=firstname]')[0].name = "firstname" + len;
   $html.find('[name=lastname]')[0].name = "lastname" + len;
   $html.find('[name=gender]')[0].name = "gender" + len;
   return $html.html();
 }