带按钮的嵌入式滑轨表单字段

Question

我有一个rails表单，可以在其中使用以下javascript动态添加更多字段。

<%= form_for(@service, url: services_create_path) do |form| %>

  <div class="form-group">
    <%= form.text_field :name, autofocus: true, :class=>"form-control", :placeholder=>"Service name" %><a href="javascript:;" id="addNewService" style="text-decoration: none;">Add more services</a>
  </div>

  <div id="serviceSet"></div>

  <div class="form-group">
     <%= form.submit :class=>"btn btn-primary pull-right" %>
  </div>
<% end %>


<script>
$(document).ready(function(){
    $('#addNewService').click(function(){
        $('div#serviceSet').append('<div class ="new_service"><input type="text" class="form-control" style="display: inline-block;" placeholder="enter more services">'+

            '<button class="btn btn-default" style="display: inline-block;" type="button">remove</button></div>' + '<br>'

        );
    });

    $("div#serviceSet").on('click', '.btn', function(){
        $(this).closest('.new_service').remove();
    });
});
</script>

现在，remove按钮显示在新添加的表单下，如下所示：

如何与按钮一起内联表单字段？