title: insertAfter creates empty space but doesn't insert element
body: <p>I want to insert a elements dynamically in between two elements. When I do with <code>insertAfter()</code> function it inserts for only once between elements and doesn't insert the element on other places But it creates a empty space between the elements where the element has to be inserted. </p>
  
  <pre><code>&lt;div id = "icons"&gt;
  &lt;a class = "favorite" data-value = "{{$candidate-&gt;id}}" &gt; &lt;img id = "no_p_fav" src="{{url('/icons/non_star.png')}}" &gt;&lt;/img&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is how i insert the element dynamically </p>
  
  <pre><code>function updatePriority(candidate_id,msg){
  
  if (msg == "pre")//apply prioritized property to the card 
  {
      $('.favorite[data-value='+candidate_id+'] img#no_p_fav').attr('id','fav');
  
      $( '&lt;a class = "prioritize" data-value = "'+candidate_id+'"&gt;&lt;img id = '+
       '"priority" src="/icons/priority.png"&gt;&lt;/img&gt;&lt;/a&gt; ').insertAfter('.favorite[data-value='+candidate_id+'] img#fav');
  
  } 
  </code></pre>
  
  <p>The above function is called from the <code>ajax</code> success method, and arguments passed to this method are from <code>ajax response</code>.</p>