title: jQuery place div in between two different divs
body: <p>I need to get for example all div's <code>data-id</code>'s and place a new div with <code>data-id="6"</code> in between <code>data-id="3"</code> and <code>data-id="9"</code>.</p>
  
  <p>The new data-id can be with an id of 1 too, so there's no div before it, but it needs to be before <code>data-id 2</code> (if it exists, if not then before the next highest number)</p>
  
  <h2>Example:</h2>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div data-id="1"&gt;&lt;/div&gt;
      &lt;div data-id="2"&gt;&lt;/div&gt;
      &lt;div data-id="5"&gt;&lt;/div&gt;
      &lt;div data-id="7"&gt;&lt;/div&gt;
      &lt;div data-id="11"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I need to add a div with <code>data-id="9"</code> in between 7 and 11.</p>
  
  <p>I'm still learning jQuery so I don't really have any clue how to achieve this. I tried with <code>insertBefore()</code> but it doesn't work like I want it to. It only works when the new div is <code>data-id="10"</code> and <code>data-id="11"</code> exists in the container.</p>
  
  <h2>Jsfiddle</h2>
  
  <p><a href="http://jsfiddle.net/u3TH4/" rel="nofollow">http://jsfiddle.net/u3TH4/</a></p>