Firing a function on click

I have addBanner() function shown below which is invoked every time I click addBanner button. This adds a input field and fires the ausu auto-suggestion jQuery script.

When I click addBanner() Button I get a input field and auto-suggestion works fine. Suppose I click addBanner() 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 addBanner 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.

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";
          newd开发者_JAVA百科iv.innerHTML = (bnrc + 1) + ". <input type='text' value='' name='banner[]' id='banner" + (bnrc + 1) + "' autocomplete='off' /> <input type='hidden' value='' name='bannerID[]' id='bannerID" + (bnrc + 1) + "' autocomplete='off' />";
          document.getElementById(divName).appendChild(newdiv);
          bnrc++;
     }

    $.fn.autosugguest({  
           className: 'banner_sugg',
          methodType: 'POST',
            minChars: 1,
              rtnIDs: true,
            dataFile: 'e_data.php'
    });
}

Did you spell suggest wrong on purpose? I'm spelling it correctly below so you may need to alter it.

You are currently (re)calling $.fn.autosuggest({}) every time you add a new item, which may be breaking the previous items.

Try:

$(newDiv).autosuggest({})

So it only adds autosuggest functionality to the new div. And you should move the code above into the section where you create the newDiv as it's even being called on error.