data-table change font awesome on click at one row

$('.sqr').click(function(){
			//var id = $(this).attr("id");
			// If this isn't already fa-square-o
		if ($(this).hasClass("fa-square-o")) {
			// Remove the class from anything that is fa-square-o
			$("i.fa-square-o").removeClass("fa-square-o");
			// And make this fa-check-square-o
			$(this).addClass("fa-check-square-o");
			$(this).css({'color':'blue'});
		}else{
			// Remove the class from anything that is fa-square-o
			$("i.fa-square-o").removeClass("fa-check-square-o");
			// And make this 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', 'padding':'black'});
		}else{
			$("i.fa-star-o").removeClass("fa-star");
			$(this).addClass("fa-star-o");
			$(this).css({'color':'black'});
		}
	});
<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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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="#">Check All</a></li>
      <li><a href="#">Uncheck All</a></li>
      <li><a href="#">Read All</a></li>
      <li><a href="#">Unread All</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>name</th>

      </tr>
  </thead>
  <tbody>
    <tr>
      <td>
      <span class="fa-m-inv">
        <i class="fa fa-square-o sqr"></i>
      </span>
      <span class="fa-m-inv">
        <i class="fa fa-star-o str"></i>
      </span>
      </td>
      <td>name1</td>
    </tr>
    <tr>
      <td>
      <span class="fa-m-inv">
        <i class="fa fa-square-o sqr"></i>
      </span>
      <span class="fa-m-inv">
        <i class="fa fa-star-o str"></i>
      </span>
      </td>
      <td>name2</td>
    </tr>
    <tr>
      <td>
      <span class="fa-m-inv">
        <i class="fa fa-square-o sqr"></i>
      </span>
      <span class="fa-m-inv">
        <i class="fa fa-star-o str"></i>
      </span>
      </td>
      <td>name3</td>
    </tr>
    <tr>
      <td>
      <span class="fa-m-inv">
        <i class="fa fa-square-o sqr"></i>
      </span>
      <span class="fa-m-inv">
        <i class="fa fa-star-o str"></i>
      </span>
      </td>
      <td>name4</td>
    </tr>
  </tbody>

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'});
    }
});

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.