Javascrit when moving the mouse over a cell, change the cell text

I'm a newbie, I'm learning a lot on the site.

I would like that when you touch item 2, you change the word item 2 to Yerba mate and keep lighting item 4.

$('.row-1 .column-2').hover(function () {
    $('.row-2 .column-2').toggleClass('active');
});

/*
$('.row-1 .column-2').hover(function(){
    alert("hovered");
    $('.row-2 .column-2').toggleClass('active');
    $('this').toggleClass('active');
});


/*
$('.row-1 .column-2').mouseenter(function(){
  $('.row-1 .column-2').addClass('active');
  $('.row-2 .column-2').addClass('active');
});

$('.row-1 .column-2').mouseleave(function() {
  $('.row-1 .column-2').removeClass('active');
  $('.row-2 .column-2').removeClass('active');
});
*/


/*
$('.row-2 .column-2').hover(function(){
    $('.row-1 .column-2').toggleClass('active');
    $('.row-2 .column-1').toggleClass('active');
});

/*
*/

.table-style {
    margin-bottom:15px;
}
.table-style td {
    border-collapse: collapse;
    border: 1px solid #ddd;
    text-align: center;
    padding: 5px 0px;
}
.table-style td span {
    font-size: 13px;
    color: #454545;
    font-weight: normal;
}
.table-style td span a {
    color: #8d8d8d;
    text-decoration:none;
}
.active {
    background: red;
}
.active span a {
    color: #000;
}
.table-style td p a:hover {
    color: #000;
    text-decoration:underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<table id="tablepress-71" class="table-style" width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr class="row-1">
        <td class="column-1"><span><a href="#">Item 1</a></span>
        </td>
        <td class="column-2"><span><a href="#">Item 2</a></span>
        </td>
    </tr>
    <tr class="row-2">
        <td class="column-1"><span><a href="#">Item 3</a></span>
        </td>
        <td class="column-2"><span><a href="#">Item 4</a></span>
        </td>
    </tr>
</table>