Use selected cell value from table to select a cell in another table with the same value

I have two tables, both have the same number of entries and the same values however the values occur at different points. An example would be

Table 1

1. John
2. Sarah
3. Chris

Table2

1. Chris
2. Sarah
3. John

I would like users when they click on John on table one his position is highlighted in table one as well as table 2.

I have already implemented the highlight function to work with table one, I just need a way to read the cell value then search its row id in table 2 to highlight that.

Below I will show my table code as well as the highlight function.

(I understand I may not be outputting the tables as optimal as I should be, I would love some assistance with that, but its old code that I have not optimized yet)

Table 1

<div class='column'>
    <h3>".$_SESSION['username']."</h3>
        <h5>Total Score: ".$data1['laligascore']."</h5>
    <table id='laliga' class='table table-bordered'>
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>
        <tbody class='row_position'>"?>

<?php
        require('config.php');
        $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE2);
        $tablename = $_SESSION['username'] . "_laliga";
        $sql = "SELECT * FROM $tablename ORDER BY position_order";
        $users = $mysqli->query($sql);
        while($user = $users->fetch_assoc()){
        ?>
            <tr  id="<?php echo $user['id'] ?>">
                <td><?php echo $user['position_order'] ?></td>
                <td><?php echo $user['title'] ?></td>
            </tr>
        <?php }?>
        </tbody>
    </table>
    </div>

Table 2 is the same but the id = laliga2

Code to highlight (note y is the table id and is passed in through another function that must be called to make the two tables appear

function highlight_row(y) {
var table = document.getElementById(y);
var table2 = document.getElementById(y.concat("2"));
var cells = table.getElementsByTagName('td');
var cells2 = table2.getElementsByTagName('td');

for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    cell.onclick = function () {
        var rowId = this.parentNode.rowIndex;

        var rowsNotSelected = table.getElementsByTagName('tr');
        for (var row = 0; row < rowsNotSelected.length; row++) {
            rowsNotSelected[row].style.backgroundColor = "";
        }
        var rowSelected = table.getElementsByTagName('tr')[rowId];
        rowSelected.style.backgroundColor = "yellow";

        msg = this.innerHTML;

        /*var tableRow = $("td").filter(function() {
            return $(this).text() == msg;
            }).closest("tr"); */



        }
}