How to assign unique id and href to a pair of cloned objects

Question

That's what I have:

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('');
        })
}

On click button with class .btn-copy-group i duplicate div with class .table-product-wrap-inner under original, but i also need to assign uniqeu id and same href for each pair of link in table and div next to it.

For unique ID i have a function:

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

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

      return getUniqueId;
    }())

and i use this to assign inique id when i clone one pair of table + div:

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

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

So i dont know how to use this when we have a lot of pairs (there may be a different numbers of pairs) table + div. The end result (after duplicate) should be something like this:

<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>

If user click <button class="btn-copy-group"> in duplicated <div class="table-product-wrap-inner"> he will get another copy with unique id etc etc.

http://stackoverflow.com/questions/8711970/clone-in-jquery-and-adding-unique-ids-for-each — Dan Wilson, Nov 02 '16 at 15:57
Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead. http://api.jquery.com/clone/ — Dan Wilson, Nov 02 '16 at 15:59
Thx but that works only if i clone one object per click with one ID. I use similar function for clone one pair of table+div. But i need assing a unique id for each par of tabble+div because i duplicate several of them per click. And seems i cant avoid .clone(). — EmptySnake, Nov 02 '16 at 16:06

score 0 · Answer 1 · answered Nov 02 '16 at 22:22

You can create a unique id with:

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

The Date.now() method returns the number of milliseconds elapsed since 1 January 1970 00:00:00. This should give you a fairly save unique id even if you clone more than 1 item at a time.

How to assign unique id and href to a pair of cloned objects

1 Answers1