更改数据表中行的图标，不影响每行中的其他图标

Question

I have fa-square-o up the table and I used while loop to fill data-table from data-base in one column I have two icons of font awesome one is fa-star-o and another is fa-square-o. I use jQuery to change icon on click. When i click in on icon is working probably but the other icon has same class in other row is hidden.

This is HTML Code for square upper table

<li class="dropdown li-inv-h">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
     <i class=" i-invo"><span class="caret"></span></i></a>
     <ul class="dropdown-menu">
       <li><a href="#">All</a></li>
       <li><a href="#">Nothing</a></li>
       <li><a href="#">Is reading</a></li>
       <li><a href="#">Not reading</a></li>
       <li><a href="#">Delete</a></li>
     </ul>
     <a href="#"><i class="fa fa-square-o" ></i></a>
</li>

This is PHP Code for column has Font Awesome in side While loop

while($row = mysqli_fetch_assoc($qry)){
echo ' <tr>
<td class="col-lg-1">
   <span><i class="fa fa-square-o sqr" id="'.$row["id"].'"></i></span>
   <span class="fa-m-inv"><i class="fa fa-star-o str" id="'.$row["id"].'"></i></span>
</td>
<td class="col-lg-1">'.$row["name"].'</td>
</tr>

My java-script is

$('.sqr').click(function(){
    if ($(this).hasClass("fa-square-o")) {
        $("i.fa-square-o").removeClass("fa-square-o");
        $(this).addClass("fa-check-square-o");
        $(this).css({'color':'blue'});
    }else{
        $("i.fa-square-o").removeClass("fa-check-square-o");
        $(this).addClass("fa-square-o");
        $(this).css({'color':'black'});
    }
});
$('.str').click(function(){
        //var id = $(this).attr("id");
    if ($(this).hasClass("fa-star-o")) {
        $("i.fa-star-o").removeClass("fa-star-o");
        $(this).addClass("fa-star");
        $(this).css({'color':'yellow'});
    }else{
        $("i.fa-star-o").removeClass("fa-star");
        $(this).addClass("fa-star-o");
        $(this).css({'color':'black'});
    }
});

T

 $('.sqr').click(function(){ if ($(this).hasClass("fa-square-o")) { $("i.fa-square-o").removeClass("fa-square-o"); $(this).addClass("fa-check-square-o"); $(this).css({'color':'blue'}); }else{ $("i.fa-square-o").removeClass("fa-check-square-o"); $(this).addClass("fa-square-o"); $(this).css({'color':'black'}); } }); $('.str').click(function(){ if ($(this).hasClass("fa-star-o")) { $("i.fa-star-o").removeClass("fa-star-o"); $(this).addClass("fa-star"); $(this).css({'color':'red'}); }else{ $("i.fa-star-o").removeClass("fa-star"); $(this).addClass("fa-star-o"); $(this).css({'color':'black'}); } }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <li class="dropdown li-inv-h"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class=" i-invo"><span class="caret"></span></i></a> <ul class="dropdown-menu"> <li><a href="#">Checked</a></li> <li><a href="#">Unchecked</a></li> <li><a href="#">Reading</a></li> <li><a href="#">Unreading</a></li> <li><a href="#">Delete</a></li> </ul> <a href="#"><i class="fa fa-square-o" ></i></a> </li> <table id="data-table" class="table table-hover"> <thead> <tr> <th></th> <th>User</th> </tr> </thead> <tbody> <tr> <td class="col-lg-1"> <span> <i class="fa fa-square-o sqr"></i> </span> <span> <i class="fa fa-star-o str"></i> </span> </td> <td>Name1</td> </tr> <tr> <td class="col-lg-1"> <span> <i class="fa fa-square-o sqr"></i> </span> <span> <i class="fa fa-star-o str"></i> </span> </td> <td>Name2</td> </tr> <tr> <td class="col-lg-1"> <span> <i class="fa fa-square-o sqr"></i> </span> <span> <i class="fa fa-star-o str"></i> </span> </td> <td>Name3</td> </tr> <tr> <td class="col-lg-1"> <span> <i class="fa fa-square-o sqr"></i> </span> <span> <i class="fa fa-star-o str"></i> </span> </td> <td>Name4</td> </tr> </tbody> </table> 

The problem for me not in php code but in java-script via font-icon change, When i click in one icon in row all other icon in other row is effective. that mean i have one empty star in each row when i click this star is remove from this row and com other star fill by yellow color but in my code when i click star all other star in each row is remove also.

I want Fix this problem, also i want when any class has fa-check-square-o change fa-icon upper table to fa-minus-square and add id of row to array to make one event choice like delete.

I read more post and not found post nearly this

Thank you every one.

Answer 1

Change $("i.fa-star-o").removeClass("fa-star-o"); To

$(this).removeClass("fa-star-o");

 $('.sqr').click(function(){ if ($(this).hasClass("fa-square-o")) { $(this).removeClass("fa-square-o"); $(this).addClass("fa-check-square-o"); $(this).css({'color':'blue'}); }else{ $(this).removeClass("fa-check-square-o"); $(this).addClass("fa-square-o"); $(this).css({'color':'black'}); } }); $('.str').click(function(){ if ($(this).hasClass("fa-star-o")) { $(this).removeClass("fa-star-o"); $(this).addClass("fa-star"); $(this).css({'color':'red'}); }else{ $(this).removeClass("fa-star"); $(this).addClass("fa-star-o"); $(this).css({'color':'black'}); } }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <li class="dropdown li-inv-h"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class=" i-invo"><span class="caret"></span></i></a> <ul class="dropdown-menu"> <li><a href="#">Checked</a></li> <li><a href="#">Unchecked</a></li> <li><a href="#">Reading</a></li> <li><a href="#">Unreading</a></li> <li><a href="#">Delete</a></li> </ul> <a href="#"><i class="fa fa-square-o" ></i></a> </li> <table id="data-table" class="table table-hover"> <thead> <tr> <th></th> <th>User</th> </tr> </thead> <tbody> <tr> <td class="col-lg-1"> <span> <i class="fa fa-square-o sqr"></i> </span> <span> <i class="fa fa-star-o str"></i> </span> </td> <td>Name1</td> </tr> <tr> <td class="col-lg-1"> <span> <i class="fa fa-square-o sqr"></i> </span> <span> <i class="fa fa-star-o str"></i> </span> </td> <td>Name2</td> </tr> <tr> <td class="col-lg-1"> <span> <i class="fa fa-square-o sqr"></i> </span> <span> <i class="fa fa-star-o str"></i> </span> </td> <td>Name3</td> </tr> <tr> <td class="col-lg-1"> <span> <i class="fa fa-square-o sqr"></i> </span> <span> <i class="fa fa-star-o str"></i> </span> </td> <td>Name4</td> </tr> </tbody> </table>