How to make an accept condition for droppable td to accept only the class within the same row?

Question

I have this droppable td.

$('#ScrumTable td').droppable({
    hoverClass: 'ondrop',
    accept: '.card',
    drop: function(event, ui){
        $(this).append($(ui.draggable));
        ui.draggable.css("top",$(this).css("top"))
        ui.draggable.css("left",$(this).css("left"))
        if(  parseInt( $(this).index() ) + 1 == 1){
            ui.draggable.addClass('backlog-card');
            ui.draggable.removeClass('inprogress-card');
            ui.draggable.removeClass('tovalidate-card');
        }
        else if(  parseInt( $(this).index() ) + 1 == 2){
            ui.draggable.addClass('inprogress-card');
            ui.draggable.removeClass('backlog-card');
            ui.draggable.removeClass('tovalidate-card');
        }
        else if(  parseInt( $(this).index() ) + 1 == 3){
            ui.draggable.addClass('tovalidate-card');
            ui.draggable.removeClass('inprogress-card');
            ui.draggable.removeClass('backlog-card');
        }
    }
});

The droppable td above must only accept the class that is within the same row. What condition can I put to the accept attribute of the droppable td?

This is my html:

<table id="ScrumTable">
    <thead>
        <th>Available Items</th>
        <th>On going </th>
    </thead>
    <tbody>
        <tr> 
            <td> <div class="card"> sample </div></td>
            <td>col 2 </td>
        <tr> 
            <td>sample2</td>
            <td>col 2</td>
        </tr>
    </tbody>
</table>

The html must work like this: the user can move the cards from the "available items" column to "on going" column, and must be in the same row.

Answer 1

So after a little bit of trials, I finally figured out the correct way.

accept: function(draggable){
    if($(draggable).parent().parent().index() === $(this).parent().index())
    {
        return true;
    }
}