JSFiddle - React, Tailwind, and code Playground

by jomanlk

HTML

<form method="POST" action="/vote">
<input type="hidden" name="key" value="{{ election.key }}">
<input type="hidden" name="uuid" value="{{ uuid }}">
    <input type='text' name='thedata' id='thedata'>
<div id="ballot" class="center">
<ol id="sortable" class="rankings">
  <li id='ranking_1' class="ranking">Jamie</li>
  <li id='ranking_2' class="ranking">Joanie</li>
  <li id='ranking_3' class="ranking">Morley</li>
  <li id='ranking_4' id='ranking_1' class="ranking">Frank</li>
  <li id='ranking_5' class="ranking">Larry</li>
</ol>
</div>
    <button type='submit'>Submit</button>
</form>

JavaScript

$( "#sortable" ).sortable({ axis: "y", containment: "#ballot", scroll: false });
$( "#sortable" ).disableSelection();

$('form').submit(function(){
     
    $('#thedata').val($( "#sortable" ).sortable("serialize"));
    return false;
});