Sortable Connected Lists MySQL Update Problem

Sortable Connected Lists MySQL Update Problem

Hey everyone, to start off I'm very new to all of this and I've been attempting to teach myself coding for a couple weeks to design a web based app for a project at an internship. I've created a sortable list that exports the positions of each item to a database so upon refresh, they don't change.  I ultimately want to have 2 lists that update a database and keep the positions of each item on the lists, but I haven't gotten there yet.

I am currently having trouble with my connecting lists and I think the problem is somewhere in my ID & Class definitions.   When it is one way it will allow me to sort items from List B to List A, but not in the reverse.  And when I change the a few things around in the ID/Class I can now sort the lists as they should, but the List A which is the current working list that updates to a database, no longer works (items go back to previous positions when the page is refreshed).

I am not knowledgeable enough to know what I should have where and again it's probably a silly problem. Thank you all in advance for your time and help.   I've highlighted the comments around the area in question, my code is as follows: 


------------------------------

<?php require("db.php"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>B.O.A.T.</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>


<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
margin-top: 10px;
float:center;
background:#ddd;
}

ul {
margin: 0;
padding: 0px;
}

#contentWrap {
width: 960px;
margin: 0 auto;
height: auto;
background:#EEE;
}

#contentTop {
width: 600px;
padding: 10px;
margin-left: 30px;
}

#contentLeft {
float: left;
margin:0px;
padding:0px;
width: 960px;
background:#DDD;
}

#contentLeft li {
list-style: none;
background-color:#808080;
color:#fff;
margin-bottom:5px; padding: 0px; float: left; height: 90px; text-align: center; width:120px; 
}

#contentLeft li input {
visibility:hidden;
}

/*
#contentLeft li:hover input {
visibility:visible;
}
*/


#contentLeft li:nth-child(n+1):nth-child(-n+6) {
width:155px;
margin-right:5px;
}

#contentLeft li:nth-child(n+7):nth-child(-n+14) {
width:115px;
margin-right:5px;
}

#contentLeft li:nth-child(n+7):nth-child(-n+14), #contentLeft li:nth-child(n+23):nth-child(-n+28) {
float:right;
background-image:url('boatright.png');
background-repeat:no-repeat;
background-position:center;
}

#contentLeft li:nth-child(n+1):nth-child(-n+6), #contentLeft li:nth-child(n+15):nth-child(-n+22), #contentLeft li:nth-child(n+29):nth-child(-n+33) {
background-image:url('boat.png');
background-repeat:no-repeat;
background-position:center;
}

#contentLeft li:nth-child(n+15):nth-child(-n+22), #contentLeft li:nth-child(n+23):nth-child(-n+26) {
width:115px;
margin-right:5px;
}
#contentLeft li:nth-child(n+27):nth-child(-n+28) {
width:235px;
margin-right:5px;
}
#contentLeft li:nth-child(n+29):nth-child(-n+33) {
width:187px;
margin-right:5px;
}

#contentLeft li:nth-child(n+13):nth-child(-n+14)
{
background-image:url('water1.jpg');
color:#00ffff;
}

#contentLeft li:nth-child(20)
{
background-image:url('boat.png');
background-repeat:no-repeat;
background-position:center; 
}

#contentRight {
float: right;
width: 260px;
padding:10px;
margin-top:10px;
display:none;
background-color:#336600;
color:#FFFFFF;
}


#sortable1, #sortable2 { list-style: none; margin: 0; padding: 0 0 2.5em; float: right; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  
  </style>
<script>
$(document).ready(function()
{ 
$(function() 
{
$("#insert-product").focus();
$("#contentLeft ul").sortable(
{ 
placeholder: "ui-state-highlight", opacity: 0.6, cursor: 'move', 
update: function() 
{
var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
$.post("updateDB.php", order, function(theResponse)
{
$("#contentRight").html(theResponse);
});  
}  
});
});
});


/*  THIS ALLOWS 2ND LIST TO BE DRAGGED TO the FIRST, BUT IT WILL NOT DO IT IN REVERSE?  */
$(function() {
    $( "#sortable1, #sortable2, #contentLeft" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
  
  
</script>

</head>
<body>


 

<div id="contentWrap">

<div id="contentTop">
 
 </div>
<!-- When this following part is " id="contentLeft" ", the items in the list called contentLeft will update to the database and save when it is refreshed.
When it is changed to " class="contentLeft" ", now all lists can be sorted BUT now the list contentLeft will not save to the database. --> 

<div id="contentLeft">
<!--  When this id is changed, it also alters in a similar way as described above -->
<ul id="contentLeft" class="connectedSortable">
<?php
$query  = "SELECT * FROM records WHERE recordListingID<=33 AND recordListingID>0 ORDER BY recordListingID DESC LIMIT 33";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
?>
<li id="recordsArray_<?php echo $row['recordID']; ?>">
<?php echo  "#" . $row['recordListingID'] . "<BR>" .   $row['recordText']; ?>
<br/>
</li>
<?php } ?>
</ul>
</div>

<div class="connectedSortable">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
 <li class="ui-state-highlight">Item 1</li>
 <li class="ui-state-highlight">Item 2</li>
 <li class="ui-state-highlight">Item 3</li>
 <li class="ui-state-highlight">Item 4</li>
 <li class="ui-state-highlight">Item 5</li>
</ul>
</div>
<form method="post" action="submit.php">
<input name="value" type="text" placeholder="value to insert" id="insert-product" />
<input name="insert" type="submit" />
</form>
</div>

</body>
</html>