Hola tengo el siguiente código al momento de apretar el botón "Agregar +" se ingresa una fila nueva a la tabla para seguir ingresando datos. Mi pregunta es la siguiente hay alguna forma donde al apretar el botón "Agregar +" el campo que yo agregue baje con el botón al lado "Quitar" y un nuevo campo vació al lado del botón "Agregar +".
<!DOCTYPE html>
<html lang="es-es">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<input type="text" name="name[]" placeholder="Postulación" class="form-control name_list" />
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-primary">Agregar + </button>
</td>
</tr>
</table>
<input type="submit" name="submit" class="btn btn-outline-success btn-lg btn-block" value="Ingresar Postulaciones" />
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
var i = 1;
$('#add').click(function() {
i++;
$('#dynamic_field').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Postulación" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Quitar</button></td></tr>');
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
});
</script>
</body>
</html>