JSFiddle - React, Tailwind, and code Playground

HTML

<body  onLoad="init()">
<section>
        <header>
            <h3>HTML 5 VIDEO LOADED XML</h3>
        </header>
    
        <div id="wrapper">
            <div id="leftcolumn">
<video   width="640" height="360" controls 
    src="http://wpc.6f9e.edgecastcdn.net/006F9E/2/3930/3930_2_A-BRITISH-SUMMER.mp4">
</video>
            </div>
            
            
            
            <div id="rightcolumn">
                
            <div id='mycustomscroll'>
                
            </div>
            
            </div>
            <div id="description">
                
            </div>
            
        </div>
    
        <footer>
            
        </footer>
</section>

</body>

CSS

#wrapper 
{ 
    margin: 0 auto;
}

#leftcolumn 
    { clear:both;
    color: #333;
    border: 1px solid #ccc;
    background-color: #F2F2E6;
    margin: 10px 5px 10px 0px;
    padding: 10px;
    height: 368px;
    width: 645px;
    float: left;
}

#price 
    { 
    
    color: #333;
    border: 1px solid #ccc;
    background-color: #F2F2E6;
    margin: 10px 5px 10px 0px;
    padding: 10px;
    height: 100%;
    width: 500px;
    float: left;
}

#rightcolumn 
    { 
    display: inline;
    position: relative;
    float: right;
    color: #666;
    border: 1px solid #ccc;
    background-color: #F2F2E6;
    margin: 10px 0px 10px 0px;
    padding: 10px;
    height: 368px;
    width: 265px;
}

#mycustomscroll 
{
    list-style: none;
    height: 348px;
    overflow: auto;
    position: relative;
    background-color: #F2F2E6;
    margin: 0.3em auto;
    font-size: 12px;
}

#mycustomscroll li
{
    font-size: 12px;
    width: 230px;
    background-color: #333;
    color: #CCC;
    padding: 5px;
    margin: 10px;
    cursor: pointer;
}

#mycustomscroll a
{
    text-decoration: none;
}

#mycustomscroll a:hover li
{
    background-color: #6F7986;
    color: #FFF;
}

JavaScript

// properties
var XML_PATH = "http://www.adjustyourset.tv/interview/cuepoints.xml";
var video_width;
var video_height;
var videos_array = new Array();


// init the application


function init() {
    // call loadXML function
    loadXML();
}


// XML loading


function loadXML() {
    $.ajax({
        type: "GET",
        url: XML_PATH,
        dataType: "xml",
        success: function onXMLloaded(xml) {
            // set cuepoints
            find("cuepoints");
            find("cuepoints");

            // loop for each cuepoint
            $(xml).find('cuepoint').each(function loopingItems(value) {
                // create an object
                var obj = {
                    timeStamp: $(this).find("timeStamp").text(),
                    desc: $(this).find("desc").text(),
                    thumbLink: $(this).find("thumbLink").text(),
                    price: $(this).find("price").text()
                };
                videos_array.push(obj);

                // append <ul> and timeStamp
                $("#mycustomscroll").append('<ul>');
                $("#mycustomscroll").append('<a><li id="item">Time Stamp:' + obj.timeStamp + '</li></a>');
            });

            // close </ul>
            $("#mycustomscroll").append('</ul>');
            // append li tags
            $("#leftcolumn").append('<li src="' + videos_array[0].desc + '"> <p src="' + videos_array[0].thumbLink + '" /></li>');
            // append description
            $("#price").append(videos_array[0].price);

            // call addListeners function
            addListeners();
        }
    });
}