JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<div id="container">
  <div id="hello">Товар</div>
  <div id="goodbye">Описание к товару</div>
</div>
<div class="clone-box"></div>

<button type="button" class="button">Копировать</button>
<ol>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст<ol>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
</ol></li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
  <li>Текст</li>
</ol>

CSS

[id*="container"] {
    margin-bottom: 10px;
}
ol{
  list-style: none;
  counter-reset: li;
}
li:before {
   counter-increment: li;
   content: counters(li, ".") ". ";
}

.slick-active .main__slider-info-body{
  opacity: 1
}

.slick-active .main__slider-info:before{
  transform: translateX(0)
}

JavaScript

$(document).ready(function() {
    var i = 1;
    
    $(".button").click(function() {
        var clone = $("#container").clone(false)
        
        var cloneItems = clone.find("*[id]").andSelf();
        console.log(cloneItems)
        cloneItems.each(function() { 
            $(this).attr("id", $(this).attr("id") + "_" + i);
        });
       
        clone.appendTo( ".clone-box" );
        i++
    });
});