อยาก แสดงสถานะ ข้อมูล Check box และการ auto update เมื่อเลือก

คือผมได้ทำระบบ สมาชิกขึ้นมาครับ โดยในสมาชิกนั้นจะมีการติกเลือกให้สมาชิกนั้นๆสามารถเข้าใช้งานในส่วนไหนได้บ้าง 
ทีนี้ผมเลยทำแบบ checkbox ขึ้นมาสำหรับ admin เพื่อให้เลือกได้ว่า User จะเข้าใช้งานส่วนไหนได้บ้าง ครับ โดยที่ 1 user จะมีการเข้าได้ใช้งานได้หลายส่วน
ผมได้สร้าง table ในการเก็บส่วนใช้งานของ User นี้ไว้ ซึ่ง 1 user มีประมาณ 9 ส่วน ครับ 
โจทย์ของผมคือ ถ้า Id ของ user ที่ถูกบันทึกลงdatabase จะต้องมี ส่วนการใช้งานไม่ซ้ำกัน เช่น User_id 1 มีส่วนการใช้งาน 1,2,4 และเมื่อต้องการเพิ่มข้อมูลให้จะเพิ่มเป็น 1,2,4,5 ประมาณนี้ครับ แต่มีเงื่อนไขว่า จะต้องไม่บันทึกลงในฟิลเดียวทั้งหมดเลย คือจะต้อง วลลูปบันทึกครับ

ประมาณนี้ครับ

ตอนนี้ผมเปลี่ยนมาเป็นแบบนี้แล้วครับ คือให้กดปุ่มสีแดง แล้วจะทำการเลือกข้อมูลทันที และปุ่มจะเป็นสีเขียวครับ แต่ถ้า คลิกอีกครั้งมันจะเปลี่ยนเป็นสีแดงและไปลบข้อมูลใน database ครับ แต่ผมไม่ทราบ Code ในส่วนของการบันทึกตรงนี้ครับ ถ้าเป็นพวก Ajax พอจะมี Code ไหมครับ

<div class="modal-body">
<form action="checkbox.php" method="post">
<?
include 'connect.php';
$strSQL = "SELECT * FROM billing_plans where planName like '%3M%'";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
<table width="350" border="1">
  <tr>
    <td width="41"><div align="center">Number</div></td>
    <td width="51"><div align="center">Plan Name </div></td>
    <td width="18"><div align="center">Select </div></td>
  </tr>
  <?php
while($objResult = mysql_fetch_array($objQuery))
{
?>
  <tr>
    <td><div align="center"><?php echo $objResult["id"];?></div></td>
    <td><div align="center"><?php echo $objResult["planName"];?></div></td>
    <td align="center"><span class="glyphicon glyphicon-remove btn btn-danger btn-circle btn-xs btnUpdate" aria-hidden="true" bgcolor="red"></span></td>
  </tr>
  <?php
}
?>
</table>
<?php
@mysql_close($objConnect);
?>
<br>
<?
$strSQL = "SELECT * FROM billing_plans where planName like '%5M%'";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
<table width="350" border="1">
  <tr>
    <td width="41"><div align="center">Number</div></td>
    <td width="51"><div align="center">Plan Name </div></td>
    <td width="18"><div align="center">Select </div></td>
  </tr>
  <?php
while($objResult = mysql_fetch_array($objQuery))
{
?>
  <tr>
    <td><div align="center"><?php echo $objResult["id"];?></div></td>
    <td><div align="center"><?php echo $objResult["planName"];?></div></td>
    <td align="center"><span class="glyphicon glyphicon-remove btn btn-danger btn-circle btn-xs btnUpdate" aria-hidden="true" bgcolor="red"></span></td>
  </tr>
  <?php
}
?>
</table>
<?php
@mysql_close($objConnect);
?>
<br>
<?
$strSQL = "SELECT * FROM billing_plans where planName like '%10M%'";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
<table width="350" border="1">
  <tr>
    <td width="41"><div align="center">Number</div></td>
    <td width="51"><div align="center">Plan Name </div></td>
    <td width="18"><div align="center">Select </div></td>
  </tr>
  <?php
while($objResult = mysql_fetch_array($objQuery))
{
?>
  <tr>
    <td><div align="center"><?php echo $objResult["id"];?></div></td>
    <td><div align="center"><?php echo $objResult["planName"];?></div></td>
    <td align="center"><span class="glyphicon glyphicon-remove btn btn-danger btn-circle btn-xs btnUpdate" aria-hidden="true" bgcolor="red"></span></td>
  </tr>
  <?php
}
?>
</table>
<?php
@mysql_close($objConnect);
?>
<br>
<input type="hidden" name="id" value="<?php echo $_GET["CusID"];?>">
</div>

ตัวอย่างโค้ดเป็นแนวทาง

<style type="text/css">
.chk_ok{
   position:    relative;  
    display:    block;
    width:  15px;
    height:     15px;
    background-color: green;
    cursor:     pointer;    
}
.chk_no{
   position:    relative;  
    display:    block;
    width:  15px;
    height:     15px;
    background-color: red;
    cursor:     pointer;
    
}
</style>  
<div style="margin:auto;width:600px;">

<ul style="list-style-type:none;">
<?php for($i=1;$i<=9;$i++){?>   
    <li style="padding:5px;"><span class="chk_no" data-chkval="<?=$i?>"></span></li>
<?php } ?>    
</ul>   
    
</div>   
    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript">
$(function(){

    $(".chk_no,.chk_ok").on("click",function(){
        var curClass=$(this).attr("class");
        var dataChk=$(this).data("chkval");
        var is_check=(curClass=="chk_no")?1:0;
        $(this).toggleClass("chk_ok").toggleClass("chk_no");
        
//        ส่งค่าแบบ post ไปบันทึกข้อมูล
//        $.post("updateData.php",{
//            is_check:is_check,
//            dataChk:dataChk
//        },function(data){
//            // ทำงานเรียบร้อยแล้ว
//        });
        
//        console.log(curClass);
//        console.log(dataChk);
//        console.log(is_check);
    });

});
</script>          

ตัวอย่าง

พี่พอจะมี Code Ajax ตัวที่ใช้บันทึก database ไหมครับ พอดีตอนนี้ผมติดในส่วนของการบันทึก database ครับ 
มันรันถูกต้องน่ะครับ echo $sql ออกมาดูก็ถูกแต่ว่ามันดันไม่ ลบใน database ให้ครับ

<?php
// old value is on.
include 'connect.php';
if ($_REQUEST['mode'] == 'on') {

	echo "deleted Package  ".$_REQUEST['CusID'];
	$sql = "DELETE hotspots_plans where  hotspot_id = '".$_REQUEST["CusID"]."' AND  plan_id = '".$_REQUEST['id']."'";
	$objQuery = mysql_query($sql) or die ;
}elseif ($_REQUEST['mode'] == 'on') {

	echo "added Package  ".$_REQUEST['CusID'];
	$sql = "INSERT INTO 'hotspots_plans' ('hotspot_id', 'plan_id') VALUES ('".$_REQUEST["CusID"]."','".$_REQUEST['id']."')";
	$objQuery = mysql_query($sql);
}

?>

ถ้ามีแค่ 2 เงื่อนไข ใช้ if else น่าจะพอ ส่วนเงื่อนไข if elseif จากโค้ดทำไมเป็นเงื่อนไขเดียวกัน เป็น on ทั้งสอง 

อ่อ ผมได้แล้วครับ ขอบคุณมากๆครับ ผมใช้ Code ประมาณนี้ครับ 



Script

    <script>
        function butToggle(id){
            var swt = $("#"+id);
            var url = 'switch.php';
            if (swt.html() == 'on') {
                var data = {id: id, mode: swt.html(), CusID: $("#CusID").val()}
                $.get(url, data, function(feedback){
                    alert(feedback); // just for show no attend
                    swt.html('off');    
                });
            }else{
                var data = {id: id, mode: swt.html(), CusID: $("#CusID").val()}
                $.get(url, data, function(feedback){
                alert(feedback); // just for show no attend
                swt.html('on');
                });
            }
        }
    </script>

Ajax

<?php
// old value is on.
include 'connect.php';
if ($_REQUEST['mode'] == 'on') {

	echo "deleted Package  ".$_REQUEST['CusID'];
	$sql = "DELETE From hotspots_plans where  hotspot_id = '".$_REQUEST["CusID"]."' AND  plan_id = '".$_REQUEST['id']."'";
	$objQuery = mysql_query($sql) or die ("Error Query [".$sql."]");

}else{

	echo "added Package  ".$_REQUEST['CusID'];
	$sql = "INSERT INTO hotspots_plans (hotspot_id,plan_id)  VALUES ('".$_REQUEST["CusID"]."','".$_REQUEST['id']."')";
	$objQuery = mysql_query($sql)or die ("Error Query [".$sql."]");
}

?>