Using autocomplete with on the fly elements
<p>I have autocomplete nested within a jquery that creates text elements on the fly. The autocomplete works properly on the <code>#url</code> text field on every text field I create, however, I cannot make it work on the price field. </p>

<p>It only works if <code>nextUrlId</code> is not increasing every time I press "Add" (without <code>nextUrlId++</code>). Because of this, I cannot autopopulate the price field upon selection from autocomplete. </p>

<p>This does not work:</p>

<pre><code>    $('#AddUrl').click(function(){
        $('&lt;p /&gt;').attr('id', 'urlParagraph' + nextUrlId)
                  .text("URL: ")
                  .appendTo('#inputBoxes');
        $( "#url"+nextUrlId ).catcomplete({
         delay: 0,
         minLength : 2,
         source: "searchsku.php",
           select: function(event, ui){
           $("#price"+nextUrlId).val(ui.item.price)}
    });
    NextUrlId++
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="inputBoxes"&gt;
   &lt;table border="1"&gt;
       &lt;tr&gt;
         &lt;td&gt;&lt;p id="nameParagraph"&gt;Name: &lt;input type="text" id="name" /&gt;&lt;/p&gt;    &lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;td&gt;&lt;p id="urlParagraph1"&gt;URL: &lt;input type="text" id="url1" /&gt;&lt;/p&gt; &lt;/td&gt;
       &lt;/tr&gt;
    &lt;/table&gt;        
&lt;/div&gt;
</code></pre>
