JSFiddle - React, Tailwind, and code Playground

by Akshay Bhatt

HTML

<form method="post" id="myfrm">
  <div class="form-group">
    <label class="col-md-4 control-label">Add Answer: <span class="star-color">*</span></label>
    <label class="col-md-2 control-label">Correct Answer: <span class="star-color">*</span></label>
    <div class="col-md-10 add">
      <input class="col-md-4" id="txtId" style="margin-left:34%;margin-top:2%;" type="text" name="quiz_options[]" value="" />
      <input type="radio" id="radId" style="margin-top:2%;" name="quiz_opt[]" value="" />
    </div>
    <div>
      <a href="javascript:void(0);" style="margin-top:2%;margin-left:25%;" class="add_button btn btn-primary" title="Add field">Add More</a>
    </div>
  </div>
</form>

JavaScript

jQuery(document).ready(function($) {
  jQuery("#myfrm").validate();

  var maxField = 4;
  var addButton = $('.add_button');
  var wrapper = $('.add');
  var fieldHTML = '<div><input type="text" id="txtId" class="col-md-4" style="margin-left:34%;margin-top:2%;" name="quiz_options[]" value=""/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input style="margin-top:4%;" type="radio" id="radId" style="margin-top:2%;" name="quiz_opt[]" value=""/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" class="remove_button" title="Remove field"><i class="fa fa-trash fa-2x"></i></a></div>'; //New input field html 
  var x = 1;
  $(addButton).click(function() {
    if (x < maxField) {
      x++;
      $(wrapper).append(fieldHTML);
    }
  });
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });
  $('#txtId').on('keyup', function() {
    $('#radId').val($('#txtId').val());
  });
});