Javascript 单击元素后插入

我有以下标记

<div class="model-timeline">
        <p>Text</p>
        <div class="timeline">
            <div class="span-blank-5"></div>
            <div class="time-span-1"></div>
            <div class="time-span-2"></div>
            <div class="time-span-2"></div>
        </div>
    </div>
<div class="model-timeline">
        <p>Text</p>
        <div class="timeline">
            <div class="span-blank-5"></div>
            <div class="time-span-1"></div>
            <div class="time-span-2"></div>
            <div class="time-span-2"></div>
        </div>
    </div>

单击其中一个时间跨度类后，我需要插入一个新的div“model detail panel”

这个新的div应该出现在timeline类之后，并且只出现在单击的timeline类的父div中

我的代码是插入div，但是在每个timeline类之后添加它，这不是我需要的行为

如何修改代码，使其只针对单击的元素父级，从而插入一次div

提前感谢。

使用

 $('.model-detail-panel').insertAfter($(this).parent()) ...

这将在单击元素的父元素之后插入面板。

使用

 $('.model-detail-panel').insertAfter($(this).parent()) ...

这将在单击的元素的父元素之后插入面板