Sortable List Items As Form Elements

I am trying to make a list editing page, so far, I am just printing list values from a database into <li> elements, and I also made the list sortable. Ideally what I want is to also be able to double click the list items to edit. The first problem I'm facing is submitting the <li> items in $_POST format in order. I tried using serialize but that only gives the order the values are in, not the values themselves. I also tried using hidden inputs before each <li>, but again the sorting problem happens. This is my code so far:

HTML / PHP:

echo('<div class="jumbotron">  
<form id="formOne" action="editListTest.php" method="get">
<input type="hidden" value="'.$dbname.'" name="dbname"></input>
<p>Title</p><input style="text-align:center; width: 90%" class="form-    control input-md" type="text" name="title" value="'.$listname.'"><p     style="padding-top:10px">Items</p>


<input type="hidden" name="listitems" id="listitems" value=""><ol     id="sortable" class="rankings">');
 $stmt2 = $mysqli2->prepare("SELECT listitems FROM {$dbname}");

 $stmt2->execute();
$stmt2->bind_result($item);    
$number = 0;
while ($stmt2->fetch()) {
    $number += 1;
    echo('<li class="notep" id="notep_'.$number.'"">'.$item.'</li>');


}

     ?>

    </ol></input>


<p>
</br><input type="button" <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit" id="more_fields" onclick="add_fields();" style="font-size:28; max-height:34px; line-height:34px; padding-top:0px; width:34px; padding-left:9px" value="+" />
<input type="hidden" value="<?php echo($private)?>" name="oldprivate" id="oldprivate"/>
<input type="button" <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit" id="less_fields" onclick="remove_fields();" style="font-size:28; max-height:34px;  line-height:34px; padding-top:0px; width:34px; padding-left:7px" value="-" />
<button <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit">Submit Edits</button>
</p> 
<p>Keep This List <?php echo($privateString) ?> : <input style="vertical-align:1px" type="checkbox" name="keepprivate" value="1" checked></p>
</form>

Javascript/Jquery:

$('#formOne').submit(function(){

var cerial = $( "#sortable" ).sortable( "serialize");

$('#listitems').val(cerial);

If anyone has any ideas that would be great, also if you have any ideas about double clicking to edit <li> items, that would be great. I have tried using jQuery to switch class and contenteditable but I've sort of hit a dead end with that. Also, just so you know: editListTest.php is the page this code is on, so it's just submitting to itself for now, but it will be submitting to a processing PHP page that will insert edits into a MYSQL database.

Any help is greatly appreciated,

Thank You