title: Insert an element in between divs that have the same class
body: <p>I have a page having this structure :: consecutive divs have the same class but each of its child div has a unique id. </p>
  
  <pre><code>&lt;div class = 'samediv'&gt;
      &lt;div id = 'onediv'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class = 'samediv'&gt;
      &lt;div id = 'twodiv'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class = 'samediv'&gt;
      &lt;div id = 'thirddiv'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now on clicking the unique div, how can I insert another div/element after its parent. </p>
  
  <p>For example, on clicking <strong>onediv</strong>, I want a div (say, <strong>unique</strong>) in between <strong>onediv</strong>'s parent and <strong>twodiv</strong>'s parent.</p>
  
  <p>The structure then becomes: </p>
  
  <pre><code>&lt;div class = 'samediv'&gt;
      &lt;div id = 'onediv'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id = "unique"&gt;
  &lt;/div&gt;
  &lt;div class = 'samediv'&gt;
      &lt;div id = 'twodiv'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class = 'samediv'&gt;
      &lt;div id = 'thirddiv'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>