Использование Cocoon (Вложенные формы )и jQuery, сортируемые вместе

В настоящее время у меня есть форма ввода, сгенерированная с помощью Cocoon, и я хотел бы сделать созданные ею поля ввода сортируемыми (с помощью сортируемого из jQuery -ui ).

Код для вложенной формы:

<%= f.simple_fields_for :checkout_procedures do |procedure| %>  
  <li><%= render 'checkout_procedure_fields', :f => procedure %></li> 
<% end %>  
<div class="links">
  <%= link_to_add_association 'add step', f, :checkout_procedures %>
</div>

Часть, которая визуализируется (_проверка _процедура _поля ):

<div class="checkout_procedure nested-fields">
  <table>
    <tr>
      <td><%= f.input :step %></td>
      <td><%= link_to_remove_association "remove step", f %></td>
    </tr>
  </table>
</div>

Я могу сделать существующие элементы сортируемыми, поместив их внутрь <div>и настроив сортировку с помощью jQuery:

<div class="sortThese">
   <%= f.simple_fields_for :checkout_procedures do |procedure| %>  
     <li><%= render 'checkout_procedure_fields', :f => procedure %></li> 
   <% end %>  
</div> 
<div class="links">
  <%= link_to_add_association 'add step', f, :checkout_procedures %>
</div>

<script>
 $(document).ready(function() {
   $(".sortThese").sortable();
      });
 </script>

Но это нарушает функциональность Cocoon link_to_add_associationи link_to_remove_association. Использование <ul>с <li>также приводит к той же неисправности Cocoon. Я искал способ взломать какой-нибудь javascript, который перемещает каждую форму ввода в сортируемый div и из него (, делая это, похоже, ссылки снова работают ), но, очевидно, это неэлегантно. Если у кого-то есть какие-либо предложения, я был бы очень признателен за них!