JSFiddle - React, Tailwind, and code Playground

HTML

<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
   <tbody class="connectedSortable ui-sortable">
   
   </tbody>
</table>

JavaScript

var aajxresponse = {
	"tag_video_details": [{
		"video_id": "369",
		"tag_name": "three",
		"video_name": "test 001",
		"video_course": "xxx",
		"Video_details": [
			"one",
			"two",
			"three"
		]

	}]
}

$(document).ready(function() {

updatetable(aajxresponse);

});
function updatetable(aajxresponse)
{
        var html = '<tr class="existingvideos">\
            <th width="20%">ID</th>\n\
            <th width="35%">Name</th>\n\
            <th width="30%">Course</th>\n\
            <th width="15%">SERT</th>\n\
        </tr>';
        for (var i = 0; i < aajxresponse.tag_video_details.length; i++)
        {
                html += '<tr video-id="' + aajxresponse.tag_video_details[i].video_id + '"  class="newvideos exercises-add-table-content">\
                             <td>' + capitalise(aajxresponse.tag_video_details[i].video_id) + '</td>\n\
                             <td>' + capitalise(aajxresponse.tag_video_details[i].video_name) + '</td>\n\
<td>\n\
<span class="btn btn-sm btn-success btn-circle">one</span>\n\
<span class="btn btn-sm btn-success btn-circle">two</span>\n\
 <span class="btn btn-sm btn-success btn-circle">three</span>\n\
 </td>\n\
 <td>FDUY</td>\n\
</tr>'
        }
        $("#videosfromtagstable tbody").html(html);
}

function capitalise(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}