Как присвоить уникальный идентификатор и HREF на пару клонированных объектов

Question

Вот что у меня есть:

HTML

<div class="table-product-wrap-inner"> 
    <table class="table-product"> 
    <a href="#1" data-toggle="collapse"></a> 
    </table> 

    <button class="btn-copy-group"></button> 

    <div class="collapse" id="1"></div> 

    <table class="table-product"> 
    <a href="#2" data-toggle="collapse"></a> 
    </table> 

    <div class="collapse" id="2"></div> 

    <table class="table-product"> 
    <a href="#3" data-toggle="collapse"></a> 
    </table> 

    <div class="collapse" id="3"></div> 
</div> 

JQuery

init: function() { 
     var that = this; 

     this.$productEdit..on('click', '.btn-copy-group', function(){ 
      var $targetTable = $(this).closest('.table-product-wrap-inner'), 
       $clonedTable = $targetTable.clone(), 
       $clonTableId = $clonedTable.removeAttr('data-product-link-group-id'), 
       $groupName = $clonedTable.find('.product-group-link-name'), 
       $linkName = $clonedTable.find('.product-link-title'), 
       $idLink = $clonedTable.find('.product-link-id'); 

      $targetTable.after($clonTableId); 
      $groupName.val($groupName.val() + " Копия"); 
      $linkName.val($linkName.val() + " Копия"); 
      $idLink.val(''); 
     }) 
} 

По щелчку button с классом .btn-copy-group i дубликат div с классом .table-product-wrap-inner под оригиналом, но мне также нужно назначить uniqeu id и тому же href для каждой пары ссылок в table и div рядом с ним.

Для уникального идентификатора у меня есть функция:

getUniqueId: (function() { 
     var i = 1; 

     function getUniqueId() { 
     return i += 1; 
     } 

     return getUniqueId; 
    }()) 

и я использовать это, чтобы назначить inique id, когда я клонировать одна пара table + div:

var newId = 'copy' + that.getUniqueId(); 

$clonedTable.after($targetDiv.clone().attr('id', newId)); 
$clonedTable.find('[data-toggle=collapse]').attr('href', '#' + newId); 

Так я не знаю, как используйте это, когда у нас много пар (может быть разное количество пар) table + div. Конечный результат (после двух экземплярах) должно быть что-то вроде этого:

<div class="table-product-wrap-inner"> 
    <table class="table-product"> 
    <a href="#1" data-toggle="collapse"></a> 
    </table> 

    <button class="btn-copy-group"></button> 

    <div class="collapse" id="1"></div> 

    <table class="table-product"> 
    <a href="#2" data-toggle="collapse"></a> 
    </table> 

    <div class="collapse" id="2"></div> 

    <table class="table-product"> 
    <a href="#3" data-toggle="collapse"></a> 
    </table> 

    <div class="collapse" id="3"></div> 
</div> 
<!-- COPY --> 
<div class="table-product-wrap-inner"> 
    <table class="table-product"> 
    <a href="#copy1" data-toggle="collapse"></a> 
    </table> 

    <button class="btn-copy-group"></button> 

    <div class="collapse" id="copy1"></div> 

    <table class="table-product"> 
    <a href="#copy2" data-toggle="collapse"></a> 
    </table> 

    <div class="collapse" id="copy2"></div> 

    <table class="table-product"> 
    <a href="#copy3" data-toggle="collapse"></a> 
    </table> 

    <div class="collapse" id="copy3"></div> 
</div> 

Если пользователь нажмет <button class="btn-copy-group"> в дублированной <div class="table-product-wrap-inner"> он получит еще одну копию с уникальной id и т.д. и т.п.

Answer 1

Вы можете создать уникальный идентификатор с :

function uniqueID() { 
 
    return "id-" + Date.now(); 
 
} 
 
var id = uniqueID(); 
 
console.log(id);

Метод Date.now() возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00. Это должно дать вам достаточно уникальный уникальный идентификатор, даже если вы клонируете более одного элемента за раз.