Reorder using jquery, html, php and mysql

Step 1. HTML:

Html markup is pretty simple, 

  
<div class="col">

    <form name="frmorder" action="" method="post">

  <table width="100%" cellspacing="8" border="0" style="border-bottom:1px solid #eee">

  <tbody><tr>

  <th class="group-order">Order</th>

  <th class="group-name">Group Name</th>

  

  </tr> </tbody></table> 

  <div id="cont-move">

  

  <table width="100%" cellspacing="8" border="0" class="clone-table" style="border-bottom:1px solid #eee">

  <tbody><tr>

  <td style=" width: 60px;">

  <input type="text" value="1" name="groupIds[1]" class="txtfield text_Field" style="width:18px;"> 

  <img class="movetop" style="margin-bottom: 1px; margin-left: 5px; cursor: pointer; display: none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz-gJgjIeIi5hK8NUKdJ-m8MffPfoOAHKpmB0olntAUnaQZcBU9kKUP_DbvOAR7SwXHDa6kt66nT7amE0ON4YrUHUV_tSypwcupwww8K2fyzNJ9qXgO72OCq8iolFbCh8jZQmSLsSGDLw/s320/small_arrow_up.png"> </td>

  <td style="width:185px;">

  <span class="blue-txt">  <a href="#" class="blue-txt">PHP and web Development</a> </span> </td>

  <td style=" width: 170px;">&nbsp;</td> 

  </tr> 

  </tbody></table><table width="100%" cellspacing="8" border="0" class="clone-table" style="border-bottom:1px solid #eee">

  <tbody><tr>

  <td style=" width: 60px;">

  <input type="text" value="2" name="groupIds[2]" class="txtfield text_Field" style="width:18px;"> 

  <img class="movetop" style="margin-bottom: 1px; margin-left: 5px; cursor: pointer; display: inline;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz-gJgjIeIi5hK8NUKdJ-m8MffPfoOAHKpmB0olntAUnaQZcBU9kKUP_DbvOAR7SwXHDa6kt66nT7amE0ON4YrUHUV_tSypwcupwww8K2fyzNJ9qXgO72OCq8iolFbCh8jZQmSLsSGDLw/s320/small_arrow_up.png"> </td>

  <td style="width:185px;">

  <span class="blue-txt">  <a href="#" class="blue-txt">Photo Graphic</a> </span> </td>

  <td style=" width: 170px;">&nbsp;</td> 

  </tr> 

  </tbody></table><table width="100%" cellspacing="8" border="0" class="clone-table" style="border-bottom:1px solid #eee">

  <tbody><tr>

  <td style=" width: 60px;">

  <input type="text" value="3" name="groupIds[3]" class="txtfield text_Field" style="width:18px;"> 

  <img class="movetop" style="margin-bottom: 1px; margin-left: 5px; cursor: pointer; display: inline;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz-gJgjIeIi5hK8NUKdJ-m8MffPfoOAHKpmB0olntAUnaQZcBU9kKUP_DbvOAR7SwXHDa6kt66nT7amE0ON4YrUHUV_tSypwcupwww8K2fyzNJ9qXgO72OCq8iolFbCh8jZQmSLsSGDLw/s320/small_arrow_up.png"> </td>

  <td style="width:185px;">

  <span class="blue-txt">  <a href="#" class="blue-txt">cars groups</a> </span> </td>

  <td style=" width: 170px;">

  </td> </tr> 

  </tbody></table>

  </div>

  <table width="100%" cellspacing="8" border="0">

  <tbody><tr> <td align="center"><input type="submit" id="reorderUpdate" class="button themed" value="Save Changes" name="reorderUpdate">    </td> </tr>

  </tbody></table>
  
 </form>

  </div>
  

Step 2.Styling CSS:

.group-order {
    border: 1px solid #EEEEEE;
    font-size: 120%;
    font-weight: normal;
    padding: 3px;
    width: 60px;
}
.group-name {
    border: 1px solid #EEEEEE;
    font-size: 120%;
    font-weight: normal;
    padding: 3px;
    width: 560px;
}
.blue-txt {
    color: #0075ED;
}
.col {
    float: left;
    width: 478px;
}

Step 3. Setting up jQuery

Initial Step
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

Directly after the line where you called your jQuery, start a new script tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. The code you will be writing in the next few steps will all take place within.

$(document).ready(function() {
//Code goes here
});

 jQuery

$(document).ready(function(){

  $('.movetop').live('click',function(){

  var indx=$('.movetop').index(this);///// index of current click item

  var inDiv=$('.clone-table:eq('+indx+')').clone();/// make a clone of click item

  $('.clone-table:eq('+indx+')').remove();///remove the click item 

  $('.movetop').show();

  $('.clone-table:first').before(inDiv);// inset the clone item 

  //var p=indx+1;

  var l=$('.movetop').length;

  for(var i=0; i<l;i++){

  $('.text_Field:eq('+i+')').val(i+1);

  $('.movetop:eq(0)').hide();

  }
});
});

Step 4. Save in database:

<?php
if(isset($_POST['reorderUpdate'])){

print_r($_POST);
$groupIds=$_POST['groupIds'];
foreach($groupIds as $key=>$id):
echo "update tablename set orderfiled='$id' where id='$key'";
endforeach;
}

?>