title: Firing a function on click
body: <p>I have <code>addBanner()</code> function shown below which is invoked every time I click addBanner button. This adds a input field and fires the <a href="http://discussion.oslund.ca/2011/01/a-simple-jquery-ajax-autosuggest-plugin/" rel="nofollow noreferrer">ausu auto-suggestion jQuery script</a>. </p>
  
  <p>When I click <code>addBanner()</code> Button I get a input field and auto-suggestion works fine. Suppose I click <code>addBanner()</code> button again it adds another empty Input Field and auto-suggestion works fine for that too as the auto-suggest function is fired every time I click <code>addBanner</code> Function. But, if I want to edit the first Input Field which I had added there's conflict. Please tell me how to get the control back to the first input field.</p>
  
  <pre><code>var bnrc = 1;
  var bnrl = 5;
  function addBanner(divName){
       if (bnrc == bnrl)  {
            alert("You have reached the limit of adding " + bnrc + " Banner companies.");
       }
       else {
            var newdiv = document.createElement('div');
              newdiv.className = "banner_sugg";
            newdiv.innerHTML = (bnrc + 1) + ". &lt;input type='text' value='' name='banner[]' id='banner" + (bnrc + 1) + "' autocomplete='off' /&gt; &lt;input type='hidden' value='' name='bannerID[]' id='bannerID" + (bnrc + 1) + "' autocomplete='off' /&gt;";
            document.getElementById(divName).appendChild(newdiv);
            bnrc++;
       }
  
      $.fn.autosugguest({  
             className: 'banner_sugg',
            methodType: 'POST',
              minChars: 1,
                rtnIDs: true,
              dataFile: 'e_data.php'
      });
  }
  </code></pre>