Position div under another div

Question

I have 2 divs: div with submit and order-content div

  <div class="order"> <form> <div class="input">submit</div> </form> <div class="order-content"> <table><tr><td></td></tr></table> <div class="new-product"> <div class="product-add"> <form> </form> </div> </div> </div> </div> 

Also when I add new product, im appending new table row, so css position attribute doesn't work as I want cause it has static values. I thought about making jquery which gets height of new row and increments submit input position, but is there better solution?

Answer 1

You need to use JavaScript to move elements in DOM to a different order than they appear in the original document. Something like (jsfiddle with jQuery):

https://jsfiddle.net/khabgc6h/2/

$('.input').insertAfter('.new-product')

Answer 2

 $(".input").click(function(){ $("#table").append('<tr><td>Data</td></tr>') }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="order"> <div class="col-xs-12 form-group"> </div> <div class="col-xs-12 form-group"> <button class="btn input"> submit </button></div> <div class="col-xs-12 order-content"> <table id="table" class="form-group"><tr><td>Data</td></tr></table> <div class="new-product"> <div class="product-add"> <form> <input type="text" class="form-control" /> </form> </div> </div> </div> </div>