title: Insert HTML at specific position JQuery
body: <p>My HTMl is like this</p>
  
  <pre><code>    &lt;div class="col-lg-6"&gt;
      &lt;div class="form-group"&gt;
          my html-1
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          my html-2
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          my html-3
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          my html-4
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I want to insert a new HTML in between <code>my html-4</code> and <code>my html-3</code>. means the second last position.
  How can I make this using JQuery?</p>
  
  <p>I have done something like this</p>
  
  <pre><code>    $('#addmore').click(function () {
      var newData = My new HTML, I will get here
      $('.col-lg-6').append(newData);
  });
  </code></pre>
  
  <p>But this insert the new HTML to the last position. I want it to be inserted at the second last position always.
  Expected output</p>
  
  <pre><code>    &lt;div class="col-lg-6"&gt;
      &lt;div class="form-group"&gt;
          my html-1
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          my html-2
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          my html-3
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          my html-new one
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          my html-4
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>