JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">    
        <header id="mainHeader">
            <h1>Building an Array with Object Oriented Programming</h1>
            <p> This section is to familiarize myself with OOP and hopefully extend the flexibility of the array I will be creating.</p>
        </header>
        <section id = "addVideo">
            <h1> Add a Video </h1>
            <form id = "userInput">
            <p>
            Url: <input type="text" id="url" size="30" />
            Start Time: <input type="text" id="inpoint" size="2" />
            End Time: <input type="text" id="outpoint" size="2" />
            <input type="button" onclick="queue" value="Add" />
            <input type="button" onclick="myTime.dequeue()" value="Remove" />
            <input type="button" onclick="myTime.clear()" value="Clear" />
            </p>
            </form>
            
            <table border = "1" id = "tblVideo">
                <tr>
                    <th>Youtube URL</th>
                </tr>
            </table>
        </section>
        <aside>
            <h1>Show Contents of Timeline</h1>
            <p>
            <input type="button" onclick="myTime.runQueue()" value="Show Timeline" />
            </p>
            Your Queue:<br>
            <div id="queue"></div> 
            </aside> 
        <footer id="pageFooter">
            <p>&copy;copyright 2011 Jonny Greenwald</p>
        </footer>
    </div>

JavaScript

function Clip() {
                this.url = $("#url").val();
                this.inpoint = $("#inpoint").val();
                this.outpoint = $("#outpoint").val();
            }
            
            function Timeline() {
                this.clips = []; 
                
                this.queue = function() {
                    this.clips.push(new Clip());
                    var currentClip = this.clips[this.clips.length - 1];
                    //Creates the new table with the user's info inside.
                    addTableRow(currentClip.url, currentClip.inpoint, currentClip.outpoint); 
                }
                
                this.dequeue = function() {
                    if(this.clips.length != 0) this.clips.pop();
                    removeTableRow();
                }
                
                this.clear = function() {
                    this.clips=[];
                    clearTable();
                }
                
                this.runQueue = function() {
                    if(this.clips.length == 0) {
                        alert("You need to add something to the queue.");
                    }
                    else {
                        var i = this.clips.length;
                        var slot = 0;
                        while(i!=0) {
                            document.getElementById('queue').innerHTML+= this.clips[slot].url + " Start Time: " + this.clips[slot].inpoint + " End Time: " + this.clips[slot].outpoint + "<br>";
                            i--;
                            slot++;
                        }
                    }
                }
                
            }
            
            var myTime = new Timeline();
            
            /*function next() {
                q.shift()(); // the same as var func = q.shift(); func();
            }*/
            
            function addTableRow(url,ip,op) {
                function delayed() {
                    var...