title: how to fetch data automatically from database for drag and drop
body: <p>I want a drag and drop question and its options in to be fetched from a MySQL table and make all options in a correct sequence.</p>
  
  <hr>
  
  <p>I got this working. but how to apply this for multiple questions fetching automatically from the database.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
      $( "#sortable" ).sortable();
      $( "#sortable" ).disableSelection();
      $( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
      });
      
      var LISTOBJ = {
          saveList: function() {
              var listCSV = "";
              $( "#sortable li" ).each(function() {
                  if (listCSV === "") {
                      listCSV = $(this).val();
                  } else {
                      listCSV += "," + $(this).val();
                  }
                  $("#output").text(listCSV);
                  $("#hiddenListInput").val(listCSV);
                  //$("#listsaveform").submit();
              });
          }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;ul id="sortable"&gt;
        &lt;li value="1" class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 1&lt;/li&gt;
        &lt;li value="2" class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 2&lt;/li&gt;
        &lt;li value="3" class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 3&lt;/li&gt;
      
      &lt;/ul&gt;
      &lt;input type="button" id="savebutton" value="save"/&gt;
      &lt;div id="output"&gt;&lt;/div&gt;
      &lt;form id="listsaveform" method="POST" action="script.php"&gt;
          &lt;input type="hidden" name="list" id="hiddenListInput" /&gt;
      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>