Changing an icon with jQuery

Question

I'm have a table which has an accordion hidden on everyother row. On each row there is an icon which when clicked opens and closes the accordion.

When the accordion has been opened I want to change the icon to <i class="icon-down-dir"</i>. At the moment, when clicked all the icons change rather than just the one that was clicked. I'm having trouble targeting the correct row. It would be great if someone could show me where I'm going wrong.Thanks.

<table class=\"data\" id=\"data_table\">
<thead>";
echo "<tr><th></th><th>Name</th> <th>Surname</th> <th>Location</th><th>Nickname</th></tr>
</thead><tbody>";

$i=0;//give unique id
while($row = mysqli_fetch_array( $result )) {
$i++;
  // Print out the contents of each row into a table
  echo "<tr id=\"row_".$i."\"><td>"; 
  echo"<i class=\"icon-right-dir\" id=\"arrow".$i."\" data-toggle=\"collapse\" data-parent=\"#accordion".$i."\" href=\"#content".$i."\"></i></td><td>";

  echo $row['firstname']; 
        echo "</td><td>"; 
  echo $row['surname'];
        echo "</td><td>"; 
  echo $row['location'];
        echo "</td><td>"; 
  echo $row['nickname'];

  echo " </td></tr>";
echo "<tr>
 <td colspan=\"12\">
<div id=\"content".$i."\" class=\"panel-collapse collapse\">
                    <div class=\"panel-body\">

<p>Content inside an accordion</p>
 </div>
 </td></tr>";
} 
echo "</tbody></table>";
}

jQuery

$(document).ready(function(){
  $('.data').on("click",function(e){
    $(this).find('i').toggleClass('icon-right-dir icon-down-dir');
    e.preventDefault();
  });
});//End of document

Answer 1

Instead of $('.data') (table selector) use $('.data tr') (row selector) like below:-

$(document).ready(function(){
 $('.data tr').on("click",function(e){
    $(this).find('i').toggleClass('icon-right-dir icon-down-dir');
    e.preventDefault();
 });
});//End of document