JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <td><b>No</b>
            </td>
            <td><b>Title</b>
            </td>
            <td><b>Duration</b>
            </td>
        </tr>
    </thead>
    <tbody>
            <tr>
        <td><span class="number"></span>
        </td>
        <td><span class="title"></span>
        </td>
        <td><span class="duration"></span>
        </td>
    </tr>
    <tr>
        <td><span class="number"></span>
        </td>
        <td><span class="title"></span>
        </td>
        <td><span class="duration"></span>
        </td>
    </tr>
    <tr>
        <td><span class="number"></span>
        </td>
        <td><span class="title"></span>
        </td>
        <td><span class="duration"></span>
        </td>
    </tr>
    <tr>
        <td><span class="number"></span>
        </td>
        <td><span class="title"></span>
        </td>
        <td><span class="duration"></span>
        </td>
    </tr>
    <tr>
        <td><span class="number"></span>
        </td>
        <td><span class="title"></span>
        </td>
        <td><span class="duration"></span>
        </td>
    </tr>
    </tbody>

</table>

JavaScript

var tracks = [{
    number: "01",
    title: "Track 1",
    duration: "5:35"
}, {
    number: "02",
    title: "Track 2",
    duration: "5:15"
}, {
    number: "03",
    title: "Track 3",
    duration: "5:07"
}, {
    number: "04",
    title: "Track 4",
    duration: "0:16"
}, {
    number: "05",
    title: "Track 5",
    duration: "5:35"
}];
$('tbody td span').text(function () {
    var i = this.parentNode.parentNode.rowIndex - 1;
    return tracks[i][this.className];
});