jquery - Append element after last element in a row of floating elements -

I have to follow markup, a cover that can keep a floating number of floating elements. Maximum 3 elements can be placed on one side (= 1 row)

    
 On floating elements, there is a click event (jQuery), where after the last element of the row, an element should be clicked on "in". So if I click on element 1. For example, in the end it happens:  
  & lt; Div class = "wrapper clearfix" & gt; & Lt; Div class = "floatLeft" & gt; & Lt; / Div & gt; & Lt; Div class = "floatLeft" & gt; & Lt; / Div & gt; & Lt; Div class = "floatLeft" & gt; & Lt; / Div & gt; & Lt; Div class = "addElement" & gt; & Lt; / Div & gt; & Lt; Div class = "floatLeft" & gt; & Lt; / Div & gt; & Lt; Div class = "floatLeft" & gt; & Lt; / Div & gt; & Lt; Div class = "floatLeft" & gt; & Lt; / Div & gt; & Lt; Div class = "floatLeft" & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 Or if I click on the 5th element, I  
    
 and so on.  
 I thought about using the nth-child selector, but I can not work it properly.  
  Edit:  I do not want to wrap up in every 3. Flat Left Element in a Cover   
 
 
 On click, do this -  
  $ ('. FloatLeft Click '', function () {$ (this) .clostest ('wrapper') .andend ("
  ");} );   
 Demo  ----->