add and remove textbox js

by lemon kazi

HTML

<div class="container">
  <div class="col-md-6 col-md-offset-3">
    <form action="/app/sign-up/organization" method="post">
      <p>{{user.email}}</p>
      <input type="hidden" name="admin" value="{{user.email}}">
      <input type="hidden" name="organizationId">
      <label for="sign-up-organization">Company/Organization Name</label>
      <input type="text" class="form-control" id="sign-up-organization" name="organizationName" value="" placeholder="Company/Organization">
      <a href="#" id="sign-up-add-discovery-source">Add Another Discovery Source</a>
      <div id="sign-up-organization-discovery-source">
        <input type="text" id="discovery-source-field" placeholder="Discovery Source" name="discoverySource">
      </div>
      <br />
      <button type="submit">Submit</button>
    </form>
    <a href="/login">Already have an account? Login here!</a>
  </div>
</div>

JavaScript

$(function() {
  var dataSourceField = $('#sign-up-organization-discovery-source');
  var i = $('#sign-up-organization-discovery-source p').size() + 1;

  $('#sign-up-add-discovery-source').on('click', function() {
    $('<p><label for="discovery-source-field"><input type="text" id="discovery-source-field" size="20" name="discoverySource" value="" placeholder="Input Value" /></label> <a href="#" class="remove">Remove</a></p>').appendTo(dataSourceField);
    i++;
    return false;
  });
  $('#sign-up-organization-discovery-source').on('click', '.remove', function() {
    if (i > 2) {
      $(this).parent('p').remove();
      i--;
    }
    return false;
  });
});