如何为项目分配新名称并进行控制？

Question

我正在使用html5sortable示例创建项目列表。

现在，我想为每个项目分配新的唯一ID ，直到它们移到新位置**（在此处复制项目）**，然后将鼠标悬停在他们中的人会加载有关该商品的具体详细信息，您能帮我解决问题吗？我正在寻找最快的方法。

<section class="abcContainer">
        <div class="card border-primary mb-3" style="max-width: 20rem;">
            <div class="card-header">Toolbox</div>
            <div class="card-body">
                <div class="col col-6">
                    <ul class="ml4 js-sortable-copy sortable list flex flex-column list-reset" aria-dropeffect="move">
                        <li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false">Item 1</li>
                        <li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false">Item 2</li>
                        <li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false">Item 3</li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="jumbotron">
            <div class="col col-6">
                <h2 class="h4 mt1">Copy items here</h2>
                <ul class="p2 border maroon border-maroon js-sortable-copy-target sortable list flex flex-column list-reset" aria-dropeffect="move"></ul>
            </div>
        </div>

    </section>