Ajax和PHP和SQL

I have a list of items on my page from a DB table I am trying to change the glyphicon when checked

<div  class="div1">
<span  id=".<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-eye-open"> </span>
</div>

this is the script on the top of my page:

<script>
$(document).ready(function(){
    $(".div1").click(function(){
        $(".div1").load("clicked.php");
    });
});
</script>

clicked.php looks like:

<span  id="<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-ok"> </span>

The problom is the when I click on one item - all the items change there glyphicons

What am I doing wrong?

You just have to remove & add new class:

$(document).ready(function(){
    $(".div1").click(function(){
        $(this).children('span').removeClass('glyphicon-eye-open');
        $(this).children('span').addClass('glyphicon-ok');

        //Here you can add ajax call

    });
});

There is no need to go all the way to the server to get a new span when all you are doing is removing a class and adding a new class to a span.

Also using the right scope, $(this) will stop it effecting all your div1 elements.

<script>
$(document).ready(function(){
    $(".div1").click(function(){
        //$(".div1").load("clicked.php");
        $(this).children('span').removeClass('glyphicon-eye-open');
        $(this).children('span').addClass('glyphicon-ok');
    });
});
</script>

And to make the code toggle from one to another on each click

<script>
    $(document).ready(function(){
        $(".div1").click(function(){
            if ( $(this).children('span').hasClass('glyphicon-ok') ) {
                $(this).children('span').removeClass('glyphicon-ok');
                $(this).children('span').addClass('glyphicon-eye-open');
            } else {
                $(this).children('span').removeClass('glyphicon-eye-open');
                $(this).children('span').addClass('glyphicon-ok');
            }
        });
    });
    </script>