insertAfter clicked element
<p>I have the following markup;</p>

<pre><code>&lt;div class="model-timeline"&gt;
        &lt;p&gt;Text&lt;/p&gt;
        &lt;div class="timeline"&gt;
            &lt;div class="span-blank-5"&gt;&lt;/div&gt;
            &lt;div class="time-span-1"&gt;&lt;/div&gt;
            &lt;div class="time-span-2"&gt;&lt;/div&gt;
            &lt;div class="time-span-2"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;div class="model-timeline"&gt;
        &lt;p&gt;Text&lt;/p&gt;
        &lt;div class="timeline"&gt;
            &lt;div class="span-blank-5"&gt;&lt;/div&gt;
            &lt;div class="time-span-1"&gt;&lt;/div&gt;
            &lt;div class="time-span-2"&gt;&lt;/div&gt;
            &lt;div class="time-span-2"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>and script;</p>

<pre><code>    $('[class*="time-span"]').on('click', function () {
    $('.model-detail-panel').insertAfter('.timeline').slideDown('fast', function () {
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 500);
    });
});
</code></pre>

<p>I need to insert a new div 'model-detail-panel' after clicking one of the time-span classes.</p>

<p>This new div should appear after the timeline class and only inside the parent div of the timeline class that was clicked.</p>

<p>The code I have is inserting the div, but its adding it after every timeline class which is not the behaviour I need.</p>

<p>How can I modify my code to target only the clicked parent of the element, hence inserting the div once?</p>

<p>Thanks in advance.</p>
