JSFiddle - React, Tailwind, and code Playground

by sendil J

HTML

<div id="inputFields" class="floatLeft">
  <div>
    <span><input type="text" name="userInp"/></span><span title="remove this field" class="visibleHide"><button>-</button></span>
  </div>
</div>
<div title="add a field above" id="addBtn" class="floatLeft">
  <button>Add field</button>
</div>

<div title="Submit" id="submitBtn" class="cleatBoth">
  <button>Submit</button>
</div>

CSS

.floatLeft {
  float: left;
}
.cleatBoth{clear:both;}
.visibleHide{visibility:hidden;}

JavaScript

// method to add input field
$('#addBtn').click(function() {
  $('#inputFields').append('<div><span><input type="text" name="userInp"/></span><span title="remove this field" class="deleteField"><button>-</button></span></div>');
  // method to remove input field
  $('.deleteField').click(function() {
   if ($('#inputFields div').length > 1) {
      $(this).parent().remove();
    }
  })
})

// method to submit all input values
$('#submitBtn').click(function() {
  var inputVal = "";
  $('#inputFields div').each(function(i) {
    if (i < 1) {
      inputVal = $(this).find('input').val();
    } else {
      inputVal += ',' + $(this).find('input').val();
    }
  })
  alert('Submiting Value = ' + inputVal);
})