JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cyborg/bootstrap.min.css">
<div class="panel panel-default">
    <table class="table table-hover" id="tblData">
        <caption>Test if youtube video id is valid</caption>
        <thead>
            <tr>
                <th>Youtube Video ID</th>
                <th>Add/Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="text" class="form-control song-input" value="youtube.com/watch?v=K1CScQOj1dA" />
                </td>
                <td>
                    <button type="button" class="btn btn-default btn-add">Add</button>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" class="form-control song-input" value="https://www.youtube.com/watch?v=K1CScQOj1dA" />
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-del">Del</button>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" class="form-control song-input" value="https://youtu.be/K1CScQOj1dA" />
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-del">Del</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

$(document).ready(function () {
    // add a row to the table
    $(".btn-add").click(function () {
        $("#tblData tbody").append('<tr><td><input type="text" class="form-control song-input" placeholder="new video" /></td><td><button type="button" class="btn btn-danger btn-del">Del</button></td></tr>');
    });

    // delete a row from the table
    $("#tblData").on("click", ".btn-del", function () {
        $(this).parent().parent().remove();
    });

    // populate array from table inputs
    var userSongs = [];
    $('.song-input').each(function () {
        if ($(this).val()) {
            userSongs.push($(this).val());
        }
    });
    console.log('Song array => ' + userSongs);

    // validate inputs to be certain user only enters video id and not url. THIS IS WHERE I NEED HELP
    var rx = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
    if ((new RegExp('\\b' + userSongs.join('\\b|\\b') + '\\b')).test(rx)) {
        alert('match');
    } else {
        alert('no match');
    }

});