Adding an element behind an element with .After() takes the previous added elements with them. (JQuery)

I have a dynamic list where I can add file fields. But when I add multiple fields, all of the added remove buttons get pushed to the last added field.

And when I use .before() instead of .after() it does work correctly, only it is before the element what I don't want..

Demo:

https://jsfiddle.net/yokLpnwo/11/

Well, Button's are added on Dom, it's your button css on the remove Button which turns your button to overlaps on each other.

'<button type="button" id="remove' + (next) + '" class="btn btn-danger remove-me"  style="margin-top: -34px; position: absolute; right: 40%;" >-</button></div><div id="field">'

CSS that you add with this button resulting your button to overlap over each other. Changes the margin top with the respective to multiply it with variable next, as below,

'<button type="button" id="remove' + (next) + '" class="btn btn-danger remove-me"  style="margin-top: -'+(next*34)+'px; position: absolute; right: 40%;" >-</button></div><div id="field">'