Q:

Limit to the number of replicated forms

Currently i am able to replicate a form, however i want to set a limit to the number of times it is able to do so(replicate). Is there a way to make it so that when, for example i want the limit to be 5, once the total number of forms hit 5 the "add" button will be disabled(when i click it, its does nothing). However when i remove a form the "add" button becomes functional(can add form) again. I am only allowed to use HTML CSS and Javascript.

$(function() {


  var addDiv = $('#addinput');
  var i = $('#addinput p').size() + 1;


  $('#addNew').live('click', function() {
    $('<label>Choose a picture<br><input type="file" ' + i + '" value="" /><img class="target" src="#" alt="Choose and Upload" /><a href="#" id="remNew">Remove</a></label><br>').appendTo(addDiv);
    i++;
    $('fieldset input').change(function() {
      if (this.files && this.files[0]) {
        var $target = $(this).next('.target');
        var reader = new FileReader();
        reader.onload = function(e) {
          $target.attr('src', e.target.result).width(150).height(112);
        };
        reader.readAsDataURL(this.files[0]);
      }
    });

    return false;
  });



  $('#remNew').live('click', function() {

    if (i > 2) {
      $(this).parents('label').remove();
      i--;
    }
    return false;
  });
});
.locationsector {
  border-radius: 5px;
  border: 5px solid black;
  width: 30%;
  margin-left: 0.79%;
  float: left;
  padding: 10px;
}
img {
  text-align: center;
  margin: 2%;
  display: inline-block;
  border: 10px solid #140E26;
  border-radius: 10px;
  padding: 5px;
  width: 150px;
  height: 112px;
}
#addNew {
  background: black;
  margin-left: 2%;
  padding: 5px;
  font-size: 15px;
  color: white;
  display: inline-block;
  width: 100px;
  border: 1px solid #140E26;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<fieldset class="locationsector" id="addinput">
  <legend>Test</legend>
  <p>
    <label for="north">Choose a Picture
      <br>
      <input type="file" required="required" />
      <img class="target" src="#" alt="Choose and Upload" />
    </label>
    <br>
    <a id="addNew">Add</a>
  </p>
</fieldset>

A:

You already have a counter i and that's good.
This will make it simpler for you to limit the replication:
// ...
        $('#addNew').live('click', function() {
            if(i > 5) {
                alert("Reached maximum number of fields.");
                return false;
            }
            $('<label>Choose a picture<br><input type="file" ' + i + '" value="" /><img class="target" src="#" alt="Choose and Upload" /><a href="#" id="remNew">Remove</a></label><br>').appendTo(addDiv);

// ...

The alert call is optional (You mentioned doing nothing?)

