How to make the code execute when the limit is actually reached
<p>I have this set of code that adds a <code>display:none</code> css class to a certain element on my page. Though this works, I need the code to apply the style to the element upon the 15<sup>th</sup> input value being shown. Right now it applies the style after the input has been created and the button is clicked again. I need it to disappear on the creation of that 15<sup>th</sup> input field.</p>

<p>Any ideas?</p>

<pre><code> &lt;script&gt; 
&gt;            var counter = 1; 
&gt;            var limit = 15; 
&gt;            function addInput(divName){
&gt; &gt;             if (counter == 15)  {       
&gt;                 var el = document.getElementById('destroy');      
&gt;                 el.style.display = "none";
&gt; &gt;               }
&gt; &gt;             else {
&gt; &gt;               var newdiv = document.createElement('div');
&gt; &gt;               newdiv.innerHTML = "&lt;span id=''&gt;Serial Number " + (counter + 1) + " : &lt;input type='text' name='myInputs[]'/&gt;&lt;/span&gt;";
&gt; &gt;               document.getElementById(divName).appendChild(newdiv);
&gt; &gt;               counter++;
&gt; &gt;             }
&gt; &gt; 
&gt; &gt; }  &lt;/script&gt;
</code></pre>
