title: Adding items dynamically/programmatically to jQuery-ui sortable
body: <p>I have some jQuery UI Portlets similar to this:</p>
  
  <p><a href="http://jqueryui.com/sortable/#portlets">http://jqueryui.com/sortable/#portlets</a></p>
  
  <p>and what I want is to add dynamically (when user click on a button on the UI) some boxes like this (display as grid) within each portlet:</p>
  
  <p><a href="http://jqueryui.com/sortable/#display-grid">http://jqueryui.com/sortable/#display-grid</a></p>
  
  <p>I want to add them to portlet from top to bottom and from left to right, defining the maximum number of "boxes" (items) per row.</p>
  
  <p>Is it possible to do (dynamically add them to each portlet)? if so, how? some ideas?</p>
  
  <p>for example, let's say I have below jquery-ui sortable block in my asp.net mvc4 view (initially empty):</p>
  
  <pre><code>&lt;ul id="sortable"&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>so when user click on a button, I want to add an item Text01</li> like this:</p>
  
  <pre><code>&lt;li id="Text01" class="ui-state-default"&gt;Text01&lt;/li&gt;
  </code></pre>
  
  <p>so after adding it, below sortable block is:</p>
  
  <pre><code>&lt;ul id="sortable"&gt;
      &lt;li id="Text01" class="ui-state-default"&gt;Text01&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>if user click on a button again, I want to add another item to the sortable block, so after adding it, below sortable block is generated:</p>
  
  <pre><code>&lt;ul id="sortable"&gt;
      &lt;li id="Text01" class="ui-state-default"&gt;Text01&lt;/li&gt;
      &lt;li id="Text02" class="ui-state-default"&gt;Text02&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and so on...</p>
  
  <p>Note that in this example ids and contents are correlative, Text01, Text02... but this is only an example, ids and contents can be different.</p>
  
  <p>Any ideas on how to do this from a jquery function?</p>
  
  <p>I am using jQuery 1.10.2</p>