JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row workrow">
    <table class="appDataTable" id="dataPickerTable">
        <tr class="appTableHeaderRow" id="dataPickerTableHeaderRow">
            <th>Character</th>
            <th>Weapon</th>
            <th>Add Below</th>
        </tr>
        <tr class="appTableContentRow">
            <td>Boba Fett</td>
            <td>Blaster</td>
            <td class="dataPickerIconDiv">
                <i class="fa fa-arrow-circle-down dataPickerIcon" aria-hidden="true"
                title="Click to add below"></i>
            </td>
        </tr>
    </table>
</div>
<hr>
<div class="col-md-6 col-sm-6 col-xs-11 currentToolsCol" id="projectdataColumn">
    <h2 class="viewHeader">Project Data</h2>
    <hr class="viewHeaderHR">
    <div id="projectDataContent">
    </div>
</div>

<script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/3aed4d9ed5.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>

CSS

html {
    height: 100%;
}

body {
    background: black;
    background-size: cover;
    color: white;
}

@font-face {
    font-family: 'animal-fantastic';
    src: url(../fonts/animalesfantastic.otf);
}

a {
    color: white;
}

a.links {
    color: #00faff;
}

#regHeader, #loginHeader {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 350%;
}

#regHR, #logHR {
    margin-top: 10px;
    margin-bottom: 10px;
}

.content {
    text-align: center;
    padding-top: 15%;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
}

.navbar-default .navbar-brand {
    color: white;
}

.navbar-default .navbar-nav li a {
    color: white;
}

.navbar {
    background-color: rgba(22, 116, 141, .7);
    color: white;
    border-bottom: 5px solid white;
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.1em;
    letter-spacing: 1px;
}

.navbar-brand {
    font-family: 'animal-fantastic';
}

.nav .navbar-nav .navbar-right {
    padding-right: 21%;
}

h1 {
    font-weight: 700;
    font-size: 4.5em;
    font-family: 'animal-fantastic';
}

h3 {
    font-family: 'Ubuntu', sans-serif;
}

.icon-bar {
    color: white;
}

hr {
    width: 30%;
    border-top: 1px solid #f8f8f8;
    border-bottom: 4px solid rgba(0,0,0,0.4),
}

#loginform, #registrationForm {
    text-align: left;
    margin-top: 10%;
    padding: 2%;
    background-color: rgba(22, 116, 141, .4);
    border: 3px solid white;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
    border-radius: 10px;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
}

label {
    letter-spacing: 1px;
}

.btn-lg, #loginButton {
    background: rgba(0, 0, 0, 0.1);
    box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.5),        /* Exterior Shadow */
            inset 0 1px rgba(255, 255, 255, 0.3),        /* Top light Line */
       ...

JavaScript

$(document).on('click', '.dataPickerIconDiv', function() {
    console.log("caught the click")
    $("#projectDataContent").prepend("<p>Appears below 'Project Data'</p><hr>");
});