JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table">
    <thead>
        <tr>
            <th class="text-left">id</th>
            <th class="text-left">title</th>
            <th class="text-left">date</th>
            <th class="text-left">Edit</th>
            <th class="text-left">Delit</th>
        </tr>
    </thead>
</table>

CSS

table, button {
    font:10px arial;
}
.red {
    background:red !important;
}

JavaScript

var arrayId = ["1QGWERjZmI8", "Wso1alcdx1k", "mqJnFPUxq7A", "l2RN4FGY3Do", "bjLIZ0dExy8"];
var arrayLength = arrayId.length;
var table;
for (i = 0; i < arrayLength; i++) {
    table = document.createElement('tr');
    table.setAttribute("id", arrayId[i]);
    table.className = "tabbd";
    document.getElementsByTagName('table')[0].appendChild(table);
}
$("tr.tabbd").each(function (indx, element) {
    var video_id = $(this).attr('id');
    var url = "http://gdata.youtube.com/feeds/api/videos/" + video_id + "?v=2&alt=json";

    function getYouTubeInfoSmall() {
        $.ajax({
            url: url,
            dataType: "jsonp",
            success: function (data) {
                parseresults(data);
            }
        });
    }

    function parseresults(data) {
        var title = data.entry.title.$t,
            UpLoDa = data.entry.media$group.yt$uploaded.$t,
            UpLoData = UpLoDa.substr(8, 2) + "." + UpLoDa.substr(5, 2) + "." + UpLoDa.substr(0, 4) + " " + UpLoDa.substr(11, 5);
        $("tr#" + video_id + ".tabbd").html("<td>" + video_id + "</td><td>" + title + "</td><td>" + UpLoData + "</td><td><button v-id='" + video_id + "' id='edit'>Edit</button></td><td><button>Delit</button></td>");
    }

    $(document).ready(function () {
        getYouTubeInfoSmall();
    });
});

function EditData() {
    $("tr.tabbd button#edit").click(function () {
        var v_id_edit = $(this).attr('v-id');
        $("tr.tabbd.red").removeClass('red');
        $("tr.tabbd#" + v_id_edit).addClass('red');
    });
}
window.onload = function () {
    EditData();
}