Using autocomplete with on the fly elements - php

Question

I have autocomplete nested within a jquery that creates text elements on the fly. The autocomplete works properly on the #url text field on every text field I create, however, I cannot make it work on the price field.
It only works if nextUrlId is not increasing every time I press "Add" (without nextUrlId++). Because of this, I cannot autopopulate the price field upon selection from autocomplete.
This does not work:
$('#AddUrl').click(function(){
$('<p />').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++
HTML:
<div id="inputBoxes">
<table border="1">
<tr>
<td><p id="nameParagraph">Name: <input type="text" id="name" /></p> </td>
</tr>
<tr>
<td><p id="urlParagraph1">URL: <input type="text" id="url1" /></p> </td>
</tr>
</table>
</div>

Answer 1

If I get it right, you have two related fields for each URL. One with an autocomplete box, and one with a price. Depending on the autocomplete entry, the price box should change value. I haven't tested this, but I belive something like this should work well. Instead of keeping track of ID's, you're just looking at the sibling element of the autocomplete field. Many ways of doing this, two examples below, in preferred order.
<div id="inputBoxes">
<p class="inputbox">
<input type="text" class="autocompleter" name="autocompleter[]">
<input type="text" name="price[]" class="price">
</p>
<input type="button" value="Add" id="addURL">
</div>
Solution 1
$(".inputbox").find(".autocompleter").catcomplete({
delay: 0,
minLength : 2,
source: "searchsku.php",
select: function(event, ui){
$(this).siblings(".price").val(ui.item.price);
}
});
$("#addURL").bind("click",function(){
var last = $(".inputbox").last();
var newItem = last.clone()
newItem.insertAfter(last);
newItem.find(".autocompleter").catcomplete({
delay: 0,
minLength : 2,
source: "searchsku.php",
select: function(event, ui){
$(this).siblings(".price").val(ui.item.price);
}
});
});
Solution 2
If you would prefer a fixed relation between the autocomplete field and the price fields within each paragraph, I'd do something like this.
<div id="inputBoxes">
<p class="inputbox">
<input type="text" rel="1" class="autocompleter" name="autocompleter[]">
<input type="text" rel="1" name="price[]" class="price">
</p>
<input type="button" value="Add" id="addURL">
</div>
$(".inputbox").find(".autocompleter").catcomplete({
delay: 0,
minLength : 2,
source: "searchsku.php",
select: function(event, ui){
$('.price[rel="'+$(this).attr("rel")+'"]').val(ui.item.price);
}
});
$("#addURL").bind("click",function(){
var last = $(".inputbox").last();
var newItem = last.clone()
newItem.insertAfter(last);
var lastRel = last.find(".autocompleter").attr("rel");
newItem.find(".autocompleter").attr("rel",lastRel+1);
newItem.find(".price").attr("rel",lastRel+1);
newItem.find(".autocompleter").catcomplete({
delay: 0,
minLength : 2,
source: "searchsku.php",
select: function(event, ui){
$('.price[rel="'+$(this).attr("rel")+'"]').val(ui.item.price);
}
});
});