JSFiddle - React, Tailwind, and code Playground

by cory a

HTML

<table id="one" style="border:1px solid red;">
    <caption>Table 1</caption>
    
        <tr>
            <th></th>
            <th>ID</th>
            <th>Name</th>
            <th>System</th>
        </tr>
    
    <tbody>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>12</td>
            <td>Sam</td>
            <td>FSS</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>87</td>
            <td>Harry</td>
            <td>MSS</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>23</td>
            <td>Rita</td>
            <td>MVV</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>65</td>
            <td>Tom</td>
            <td>RDD</td>
        </tr>
    </tbody>
</table>
<br>
<hr>
<br>
<button id="add">Add</button>

JavaScript

var stringresult = '';
$('#add').on('click', function () {
    $('input:checked').each(function () {
        $this = $(this);
        var one = $this.parent().siblings('td').eq(0).text();
        var two = $this.parent().siblings('td').eq(1).text();
        var three = $this.parent().siblings('td').eq(2).text();
        alert(one + ' ' + two + ' ' + three);

        //or just 
        stringresult += $this.parent().siblings('td').text();
    });
    alert('This is the whole string: '+stringresult);
});