jQuery / issue after cloning an autocomplete table

Question

I've a piece of code which does a search with autocompletion. Once the value is selected, it starts a function which returns below the autocompletion input a detailed info of the selection. This part works perfectly.

Now, I've set a template of this first part. Once I clone it and I do the search, the autocompletion works but once an item is selected, the function (loadAC) doesn't return anything at all.

Ah, I forgot to mention the part with attr name. I'm working with IE11 and whatever I do, it adds name as submitName. Could this explain the issue? Does anyone manage to fix this?

I'm wondering if there isn't an issue with inputs names, classes and id's? Please find below the code. All suggestions are welcome. Thanks!

<button class="addOffer">Add Offer</button>
<button class="delOffer">Delete Offer</button>
<TABLE id="AC" style="display:none" width="950" border="0">
      <TR>
          <TD width="23" class="g1"><INPUT type="checkbox" class="delCheckAC" name="chk"/></TD>
          <TD class="g1"><INPUT type="text" id="ACREG" name="ACREG"/></TD>
          <TD class="g1"></TD>
          <TD class="g1"></TD>
      </TR>
</TABLE>
  <div id=offer>
<TABLE id="AC0" width="900" border="0">
      <TR>
          <TD width="23" class="g1"><INPUT type="checkbox" class="delCheckAC" name="chk"/></TD>
          <TD width="100" class="g1"><INPUT type="text" class="actsearch" id="ACREG0" name="ACREG0"/></TD>
          <TD class="g1"></TD>
          <TD class="g1"></TD>
      </TR>
</TABLE>

</div>

Js

<script type="text/javascript">
var uniqueId = 1;
var uniqueLeg = 1;
$(function () {
    $(".actsearch").autocomplete({
        source: 'suggest_act.php',
        minLength: 3,
        select: function (event, ui) {
            var id = $(this).attr("id");
            loadAC(ui.item.value, id);
        }
    });
});
function loadAC(ACVal, ACId) {
    alert(ACVal);
    var pattern = ACId.match(/(\D+)(\d+)/).slice(1);
    var idtext = pattern[0];
    var id = pattern[1];
    $('#ACDetail' + id).remove();
    $('#ACPic' + id).remove();
    $.get("actsel.php", {
        term: ACVal,
        id: id
    }, function (data) {
        $('#AC' + id).append(data);
    });
}
$('.addOffer').click(function () {
    var copy = $('#AC').clone();
    var formId = 'AC' + window.uniqueId;
    copy.attr('id', formId);
    copy.removeAttr('style');
    copy.find(':input#ACREG').each(function () {
        $(this).removeAttr('name');
        $(this).addClass('actsearch');
        var dateid = 'ACREG' + window.uniqueId;
        $(this).attr('id', dateid);
        $(this).attr('name', $(this).attr('id'));
        $(this).autocomplete({
            source: 'suggest_act.php',
            minLength: 3
        });
    });
    $('#offer').append(copy);
    window.uniqueId++;
});
$('.delOffer').click(function () {
    $(".delCheckAC").each(function (i, n) {
        if ($(n).get(0).checked == true) { 
            $(n).closest("table").remove();
        }
    });
});
</script>

Answer 1

you need to add the same select option in autocomplete like this

$('.addOffer').click(function () {
var copy = $('#AC').clone();
var formId = 'AC' + window.uniqueId;
copy.attr('id', formId);
copy.removeAttr('style');
copy.find(':input#ACREG').each(function () {
    $(this).removeAttr('name');
    $(this).addClass('actsearch');
    var dateid = 'ACREG' + window.uniqueId;
    $(this).attr('id', dateid);
    $(this).attr('name', $(this).attr('id'));
    $(this).autocomplete({
        source: 'suggest_act.php',
        minLength: 3,
        select: function (event, ui) {//the same function $(".actsearch").autocomplete
            var id = $(this).attr("id");
            loadAC(ui.item.value, id);//alert the selected item
        }
    });
});
$('#offer').append(copy);
window.uniqueId++;
});