带有值的自动填充搜索框的动态数量

Question

在我的设置中，我有两个输入框，书名和书价。书名是自动完成的。当我试图根据选择设定价格值时，我陷入了困境。例如，如果我在自动填充“1003”中选择ajax应该在书价中选择。

下面的jQuery代码：

$(function() {
  var projects =  [
    {
        "label": "ajax",
        "value": "1003",
        "desc": "foriegn"
    },
    {
        "label": "jquery",
        "value": "1000",
        "desc": "dd"
    },


    {
        "label": "wordpress theme",
        "value": "1000",
        "desc": "h"
    },
    {
        "label": "xml",
        "value": "1000",
        "desc": "j"
    } ];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).val( ui.item.value );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label  + "</a>" )
.appendTo( ul );
};


/*Add Row feature starts here*/


$("#addButton");
var counter = 13;

$("#addButton").click(function () {
 var newTextBoxDiv = $(document.createElement('div'))
  .attr("id", 'TextBoxDiv' + counter);

 var roleInput = $('<input/>',{
  type:'text',
  placeholder:'Role',
  name:'Role'+counter,
  id:'project-description' + counter
 });

 var searchInput = $('<input/>',{
  type:'text',
  placeholder:'search',
  name:'search'+counter,
  id:'project' + counter
 });

 var hidd=$('<input/>',{
  type:'hidden',
  name:'searchhid'+counter,
  id:'project-id' + counter
 });


 newTextBoxDiv.append(roleInput).append(searchInput).append(hidd);
 newTextBoxDiv.appendTo("#TextBoxesGroup");
 $('#project' + counter).autocomplete({
  minLength: 0,
        source: projects,
        focus: function( event, ui ) {
        $( "#project" + counter ).val( ui.item.label );
        return false;
        },
        select: function( event, ui ) {
        $( "#project" + counter ).val( ui.item.label );
        $( "#project-id" + counter).val( ui.item.value );
        $( "#project-description" + counter).val( ui.item.value );
        $( "#project-icon" + counter).attr( "src", "images/" + ui.item.icon );
        return false;
        }
 });

 counter++;
});



/*Add row feature ends here*/


});

html在

之下

<div id="project-label"></div>

<input id="project" />
<input type="hidden" id="project-id" />

<input type="text" disabled="disabled" id="project-description"></p>


 <div id='TextBoxesGroup'>
 <div id="TextBoxDiv1" class="form-inline control-group">

 </div>
</div>
 <input type='button' value='Add' id='addButton' />

我不确定为什么自动完成选择不适用于动态添加的输入框。任何帮助将受到高度赞赏