JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<table class="table products">
    <thead>
        <tr class="nodrag nodrop">
            <th class="">
                <span class="title_box">Product ID</span>
            </th>
            <th class="">
                <span class="title_box">Product Name</span>
            </th>
            <th class="">
                <span class="title_box">Action</span>
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class="pointer">5</td>
            <td class="pointer">Summer Dress</td>
            <td class="pointer"></td>
        </tr>
        <tr class="even">
            <td class="pointer">7</td>
            <td class="pointer">Printed Dress</td>
            <td class="pointer"></td>
        </tr>
        <tr class="odd">
            <td class="pointer">8</td>
            <td class="pointer">Printed Summer Dress</td>
            <td class="pointer"></td>
        </tr>
        <tr class="even">
            <td class="pointer">9</td>
            <td class="pointer">TShirt</td>
            <td class="pointer"></td>
        </tr>
</tbody>
    </table>

JavaScript

$('.products tbody tr').each(function(index,elem){
    $elem = $(elem);
    $elem.find('td').last().append('<a class="remove-product" data-id="'+$elem.find('td').first().html()+'" href=""><i class="icon-remove"></i>Remove</a>');
})