JSFiddle - React, Tailwind, and code Playground

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='member_id_1' class="ranking">Suriya</li>
  <li id='member_id_2' class="ranking">Vijay</li>
  <li id='member_id_3'  class="ranking">Ajith</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;
}); 
$("#sortable").change(function(){
	console.log($("#sortable").sortable("serialize"));
});