Question

I have a list of form-field divs inside a containing div.

<div id="container">
    <div class="form-field">    
        // Data
    </div>
    <div class="form-field"> // selected item   
        // Data
    </div>
    <div class="form-field">    
        // Data
    </div>
</div>

I have a selected item var which holds the item that we’re working with. Say for example, the second form field div is selected. How would I append another element right after the selected item? Another form field div needs to be added to the 3rd spot in the list. The list will be dynamic, so where it goes will always depend on the selected item.

Answer 1

jsFiddle demo

Use .after() in combination with the :eq() selector

$('.form-field:eq(1)').after('<h2>Your New Html After it</h2>');

You would probably want to make it dynamic, and have that 1 be a variable so you can put it after whichever form-field you wanted. This will make it come after the 2nd div as you wanted. Note :eq() is 0-index based.