Javascript 克隆LI div，使其位于原始LI之后，而不是结束

我希望能够点击一个项目，并在该项目之后立即克隆它，此时它总是克隆到末尾，id将其添加到列表中的最后一个LI之后。 我在这里创建了一个JSFIDLE

JS

const curId = 20;

function cloneIt(){
  var newId = Math.floor((Math.random() * 1000) + 1);
    const newCloned = $('#d'+curId).clone(true).prop('id', "d"+newId );
    newCloned.html(newCloned.html().replace(
    new RegExp(curId, 'g'),
    newId
    ));

    $("#ulContainer").append(newCloned);
}


$('#ulContainer').on('click', '.tog', function(e) {
  cloneIt();
  alert('item cloned');
    e.preventDefault();
});

HTML

<ul id='ulContainer'>
<li id="d20" class="cards__item">
    <div class="card">
        <div class="card__content cellb">
            <a id="dup20" class="tog" href="http://test/pgdup/20">
                <div class="dup20">clone me</div>
            </a>
        </div>

        <div class="card__content nick">
            <p class="card__text nick">Test Tres (20)</p>
        </div>
    </div>
</li>
<li id="d21" class="cards__item">

    <div class="card">
        <div class="card__content anchor">
            <a id="dup21" class="tog" href="http://test/pgdup/21">
                <div class="dup21">clone me</div>
            </a>
        </div>

        <div class="card__content nick">
            <p class="card__text nick">Test Tres (21)</p>
        </div>
    </div>
</li>
</ul>

测试树（20）



测试树（21）

您可以通过将事件传递给函数来尝试使用：

在匹配元素集中的每个元素之后插入由参数指定的内容

改变

$("#ulContainer").append(newCloned);

到

const curId=20；
功能克隆酶（e）{
var newId=Math.floor（（Math.random（）*1000）+1）；
const newCloned=$（'#d'+curId）.clone（true）.prop（'id'，“d”+newId）；
newCloned.html（newCloned.html（）.replace(
新RegExp（curId，'g'），newId））；
$（e.target.closest（'li'））。在（newCloned）之后；
}
$（'#ulContainer'）。on（'click'，'.tog'，函数（e）{
克隆酶（e）；
警报（“项目克隆”）；
e、 预防默认值（）；
});



测试树（20）



测试树（21）


将其始终放在第一个LI之后。所以如果你点击第二个LIm，它就会把它放在上面。点击克隆也是一样的……所有克隆都会在第一个克隆之后而不是之前的克隆之后获得位置clicked@Cheetah，我已更新答案，请检查：）
$(e.target.closest('li')).after(newCloned);