JSFiddle - React, Tailwind, and code Playground

by Rational Rabbit

HTML

<fieldset>
     <div class="parent-group">
         <div class="form-group">
             <div class="form-group RowDelete">
                 <a class="RowDeleteButton" id="DeleteRow" href="javascript:void(0)"> X </a>
             </div>
             <input id="Name" name="Name[]" size="20" value="" />
             <input type="checkbox" id="HM" name="HM[]" value="X" />
             <textarea class="txt" id="TA" rows="1" cols="30" name="TA[]" maxlength="100"></textarea>
             <input class='msg' name="Output" id="Output" size="3" readonly value="100" />
             <input type="text" name="Location[]" id="Location" size="30" value="" />
             <div class="Clear"></div>
         </div>
     </div>
     <div class="clearfix"></div>
     <div id="container"></div>
     <div class="form-group">
         <a id="AddRow" href="javascript:void(0)"><span style="color:#0F61AC;">Add Row</span></a>
     </div>
 </fieldset>

CSS

textarea,
    output,
    button {font-size:inherit;}
    output:nth-of-type(n+2) {margin-left:3px;}
    .msg {border:none;}
    .clearfix:before,
    .clearfix:after {display:table; content: "";}
    .clearfix:after {clear:both;}
    .RowDeleteButton {float:right; margin-top:18px; font-family:arial, sansserif; font-size:14px; display:inline-block; text-decoration:none; color:#AC0F0F; font-weight:900; cursor:pointer;}
    .RowDeleteButton:hover, .RowDeleteButton:focus {color:#FF0000;}

JavaScript

// onkeyup invoke charCount
  $('.txt').on('keyup', charCount);

  // onclick...
  $('#DeleteRow').closest('.form-group').hide();
  $('#AddRow').on('click', function (e)
  {
      var len = $('.child-border').length;
      $('.parent-group').clone(true, false).find(':input').each(function (idx, ele)
      {
          ele.name = ele.name + len;
          ele.id = ele.id + len;
          ele.value = '';
      }).end().find('.form-group').toggle(true).end()
          .toggleClass('parent-group child-border').hide()
          .appendTo('#container').slideDown('slow');
  });
  $('#container').on('click', '[id^=DeleteRow]', function(e)
  {
      var jsonData = $(this).closest('.child-border, .parent-group')
      .find(':input:not(button)').get()
      .reduce(function (acc, ele)
      {
          acc[ele.name || ele.id] = ele.value;
          return acc;
      }, {});
      $(this).closest('.child-border, .parent-group').remove();
      console.log(jsonData);
  });

  function charCount(e)
  {
      // Get the text
      var chars = this.value;
      // Get maxlength as a number
      var charMax = Number(this.getAttribute('maxlength'));
      // Number of chars typed
      var charDone = chars.length;
      // Chars remaining is 100 - chars typed
      var charToGo = charMax - charDone;
      // Display chars remaining
      $(this).next('.msg').val(charToGo);
  }