JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    
    function eachCell(){
    var cellInnerText = [];
    var cellValue = [];
    var out = document.getElementById("out");
    var out2 = document.getElementById("out2");
    $('#t2 tbody tr').each(function(index) {        
        // console.log("index ", index, " this: " , this, "this.attr(rel)", $(this).attr('rel'), "$(this).text()", $(this).text());
        console.log($(":first-child", $(this))[0]);
        cellInnerText.push($(":first-child", $(this)).text());
        cellValue.push($(":first-child", $(this)).attr('data-value'));
    });
    out.innerHTML = cellInnerText.join(" | ");
    out2.innerHTML = cellValue.join(" | ");    
}
</script>


<h2>Grep data-value and innerText of first table Cell</h2>
<table id="t2">    
    <thead>
        <tr id="tr1"><th>Student Name</th><th>Course</th></tr> 
    </thead>
    <tbody>
        <tr id="tr2"><td data-value="2B">Bert2     </td><td>Economics         </td></tr>
        <tr id="tr3"><td data-value="3C">Clyde3    </td><td>Chemics        </td></tr>
        <tr id="tr4"><td data-value="4D"></td>             <td>Digital Art    </td></tr>
        <tr id="tr5"><td data-value="5E">Ernest     </td><td>Ecmoplasma        </td></tr>
    </tbody>
</table>       
    
<button onclick="eachCell()">each cell</button>              
<div id="out">foo</div>
<div id="out2">out 2</div>

CSS

/*
     from get sekelton css
*/

/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline; }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block; }
    body {
        line-height: 1; }
    ol, ul {
        list-style: none; }
    blockquote, q {
        quotes: none; }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none; }
    table {
        border-collapse: collapse;
    border-spacing: 0; }
    td,th { padding: 0.2ex; border: 1px solid black; border-collapse: collapse; }


/* #Basic Styles
================================================== */
    body {
        background: #fff;
        font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #444;
        -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
        -webkit-text-size-adjust: 100%;
 }


/* #Typography
================================================== */
    h1, h2, h3, h4, h5, h6 {
        color: #181818;
        font-family: "Georgia", "Times New Roman", serif;
        font-weight: normal; }
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
    h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
    h2 { font-size: 35px;...