JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr>
            <td>2006</td>
            <td>AFC1000</td>
            <td>4</td>
            <td>Principles of accounting and finance</td>
            <td>1</td>
            <td>7</td>
            <td>999</td>
            <td>Hd</td>
            <td class="edit-class">
                <div class="vis_hidden">
                    <a href="http://localhost.ucroo/user/past_class_edit/2670" title="Edit Class" class="btn-mini-icon btn-edit btn-dark_blue">
                        <span>Edit Class</span>
                    </a>
                    <a href="#" class="remove-class btn-mini-icon btn-minus btn-red" data-number="2670" title="Remove Class">
                        <span>Remove Class</span>
                    </a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.vis_hidden {
    visibility: hidden;
}

JavaScript

$(function() {
    // $('tbody').on('mouseover, mouseout', 'tr', function() {
    //     $this = $(this);
    //     $this
    //         .children('.edit-class div')
    //         .toggleClass('vis_hidden');
    // });
    $('tbody tr').hover(function() {
        console.log($(this));
        var $this = $(this);
        var childpoop = $this.find('.edit-class div');
        console.log(childpoop);
        childpoop.toggleClass('vis_hidden');
    });
});