title: JQuery Combobox gets duplicated when I add a new row to the table
body: <p>I'm trying to work with the JQuery Combobox that will be on each row of a table. The user can choose to add another row and the JQuery Combobox will be activated there by Javascript.</p>
  
  <p>The trouble that I'm having is that if I loop through and activate all of the comboboxes each time I click add new row, a new combobox will be added to each row in addition to the existing one, and the existing one will lose all its functionality (i.e. all dropdown values). But if I only activate the combobox on the new row, the old comboboxes on existing rows will lose its functionality.</p>
  
  <p>Here is the JQuery code for the combobox:</p>
  
  <pre><code>//1.10 JQuery
  (function( $ ) {
  $.widget( "custom.combobox", {
      _create: function() {
          this.wrapper = $( "&lt;span&gt;" )
              .addClass( "custom-combobox" )
              .insertAfter( this.element );
          this.element.hide();
          this._createAutocomplete();
          this._createShowAllButton();
      },
  
       _createAutocomplete: function() {
           var selected = this.element.children( ":selected" ),
              value = selected.val() ? selected.text() : "";
  
          this.input = $( "&lt;input&gt;" )
           .appendTo( this.wrapper )
           .val( value )
           .attr("tabIndex", 10)
           .attr( "title", "" )
           //.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
           .autocomplete({
               delay: 0,
               minLength: 0,
               source: $.proxy( this, "_source" )
           })
           .tooltip({
              // tooltipClass: "ui-state-highlight"
           });
  
           this._on( this.input, {
               autocompleteselect: function( event, ui ) {
                   ui.item.option.selected = true;
                   this._trigger( "select", event, {
                       item: ui.item.option
                   });
               },
               autocompletechange: "_removeIfInvalid"
              });
           },
  
           _createShowAllButton: function() {
               var input = this.input,
                  wasOpen = false;
  
          $( "&lt;a&gt;" )
              .attr( "tabIndex", -1 )
              .attr( "title", "Show All Items" )
              .tooltip()
              .appendTo( this.wrapper )
              .button({
                  icons: {
                  primary: "ui-icon-triangle-1-s"
               },
               text: false
              })
              .removeClass( "ui-corner-all" )
              .addClass( "custom-combobox-toggle ui-corner-right" )
              .mousedown(function() {
                  wasOpen = input.autocomplete( "widget" ).is( ":visible" );
               })
              .click(function() {
                  input.focus();
  
                  // Close if already visible
               if ( wasOpen ) {
                   return;
               }
  
               // Pass empty string as value to search for, displaying all results
                  input.autocomplete( "search", "" );
               });
          },
  
           _source: function( request, response ) {
               var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
               response( this.element.children( "option" ).map(function() {
                   var text = $( this ).text();
                   if ( this.value &amp;&amp; ( !request.term || matcher.test(text) ) )
                          return {
                              label: text,
                               value: text,
                               option: this
                              };
                      }) );
               },
  
               _removeIfInvalid: function( event, ui ) {
  
                   // Selected an item, nothing to do
                   if ( ui.item ) {
                       return;
                   }
  
                   // Search for a match (case-insensitive)
                   var value = this.input.val(),
                      valueLowerCase = value.toLowerCase(),
                      valid = false;
                   this.element.children( "option" ).each(function() {
                       if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                           this.selected = valid = true;
                           return false;
                       }
                   });
  
                    // Found a match, nothing to do
                   if ( valid ) {
                       return;
                   }
                   // Remove invalid value
                   this.input
                   .val( "" )
                   .attr( "title", value + " didn't match any item" )
                   .tooltip( "open" );
                   this.element.val( "" );
                   this._delay(function() {
                       this.input.tooltip( "close" ).attr( "title", "" );
                   }, 2500 );
                   this.input.data( "ui-autocomplete" ).term = "";
               },
  
               _destroy: function() {
                   this.wrapper.remove();
                   this.element.show();
               }
      });
  })( jQuery );
  </code></pre>
  
  <p>Here's my code to initialize existing comboboxes on each row of the page when the page loads:</p>
  
  <pre><code>&lt;script&gt;
  &lt;c:set var="count" value="0"/&gt;
  &lt;c:forEach var="list" items="${itemlist}"&gt;
  $("#combobox_" + ${count}).combobox({
       select: function (event, ui) {
       updateAnotherColumn(this.value, ${count});
       }   
   });
  &lt;c:set var="count" value="${count +1}"/&gt;
  &lt;/c:forEach&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's the function that I call when a new row is added to loop through all rows and initialize the combobox:</p>
  
  <pre><code>function initializeCombobox(){  
      &lt;c:forEach varStatus="i" begin="0" end="${counter + 1}"&gt;
      $("#combobox_" + ${i.index}).combobox({
           select: function (event, ui) {
              updateAnotherColumn(this.value, ${i.index});
           }   
       });
      &lt;/c:forEach&gt;
      } 
  </code></pre>
  
  <p>Any pointers are welcomed!</p>