Using Cocoon (nested forms) and jQuery sorted together

I currently have an input form created using Cocoon, and would like the input fields created by it to be sorted (using sorting from jQuery-ui).

Code for the attached form:

<%= 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>

Partial that is displayed (_checkout_procedure_fields):

<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>

I can sort existing elements by placing them inside <div>and setting it to sort using 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 (, ), , , . - - , !