title: How to put maximum limit in a javascript?
body: <p>Here is the part of my form that uploads multiple images. It has an add more button, that opens a new input field. Whenever the user clicks on add more button, one new input field is opened. However, I wish that after the 5th input field is opened, and the user clicks on add more again, no new field should get open (i.e. I wish to limit the size of input field to 5)</p>
  
  <pre><code>&lt;div id="formdiv"&gt;
      &lt;form enctype="multipart/form-data" action="" method="post"&gt;
          &lt;div id="filediv"&gt;&lt;input name="file[]" type="file" id="file"/&gt;&lt;/div&gt;&lt;br/&gt;
              &lt;input type="button" id="add_more" class="upload" value="Add More Files"/&gt;
              &lt;input type="submit" value="Upload File" name="submit" id="upload" class="upload"/&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>javascript that handles the working </p>
  
  <pre><code>var abc = 0; //Declaring and defining global increement variable
  
  $(document).ready(function() {
  
  //To add new input file field dynamically, on click of "Add More Files" button below function will be executed
      $('#add_more').click(function() {
          $(this).before($("&lt;div/&gt;", {id: 'filediv'}).fadeIn('slow').append(
                  $("&lt;input/&gt;", {name: 'file[]', type: 'file', id: 'file'}),        
                  $("&lt;br/&gt;&lt;br/&gt;")
                  ));
      });
  
  //following function will executes on change event of file input to select different file   
  $('body').on('change', '#file', function(){
              if (this.files &amp;&amp; this.files[0]) {
                   abc += 1; //increementing global variable by 1
  
                  var z = abc - 1;
                  var x = $(this).parent().find('#previewimg' + z).remove();
                  $(this).before("&lt;div id='abcd"+ abc +"' class='abcd'&gt;&lt;img id='previewimg" + abc + "' src=''/&gt;&lt;/div&gt;");
  
                  var reader = new FileReader();
                  reader.onload = imageIsLoaded;
                  reader.readAsDataURL(this.files[0]);
  
                  $(this).hide();
                  $("#abcd"+ abc).append($("&lt;img/&gt;", {id: 'img', src: 'img/x.png', alt: 'delete'}).click(function() {
                  $(this).parent().parent().remove();
                  }));
              }
          });
  
  //To preview image     
      function imageIsLoaded(e) {
          $('#previewimg' + abc).attr('src', e.target.result);
      };
  
      $('#upload').click(function(e) {
          var name = $(":file").val();
          if (!name)
          {
              alert("First Image Must Be Selected");
              e.preventDefault();
          }
      });
  });
  </code></pre>
  
  <p>Can anyone help me in applying this maximum limit?</p>