jQuery Add/Remove Input Fields

A script to add or remove a input field. With corrected line breaks.

by Good Muyis

HTML

<form action="" method="post">
	<div id="InputsWrapper">
		<div><input type="text" name="mytext[]" id="field_1" value=""><a href="#" class="removeclass"></a></div>
	</div>
	<div id="AddMoreFileId">
		<a href="#" id="AddMoreFileBox" class="btn btn-info">Add field</a><br><br>
	</div>
	<div id="lineBreak"></div>
	<input type="submit" id="submit" name="send" value="Send">
</form>

CSS

* { font-family:Arial; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

JavaScript

$(document).ready(function() {

  var MaxInputs = 2; //maximum extra input boxes allowed
  var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
  var AddButton = $("#AddMoreFileBox"); //Add button ID

  var x = InputsWrapper.length; //initlal text box count
  var FieldCount = 1; //to keep track of text box added

  //on add input button click
  $(AddButton).click(function(e) {
    //max input box allowed
    if (x <= MaxInputs) {
      FieldCount++; //text box added ncrement
      //add input box
      $(InputsWrapper).append(`
      <div>
      <input type="text" name="mytext[]" id="field_' + FieldCount + '"/>
      <a href="#" class="removeclass">--</a>
      </div>`);
      x++; //text box increment

      $("#AddMoreFileId").show();

      $('AddMoreFileBox').html("Add field");

      // Delete the "add"-link if there is 3 fields.
      if (x == 3) {
        $("#AddMoreFileId").hide();
        $("#lineBreak").html("<br>");
      }
    }
    return false;
  });

  $("body").on("click", ".removeclass", function(e) { //user click on remove text
    if (x > 1) {
      $(this).parent('div').remove(); //remove text box
      x--; //decrement textbox

      $("#AddMoreFileId").show();

      $("#lineBreak").html("");

      // Adds the "add" link again when a field is removed.
      $('AddMoreFileBox').html("Add field");
    }
    return false;
  })

});