JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="sideBar" class="sideBar">

  <div id="headbar" class="headbar">

    <h5> Home</h5>
    <div id="myBtn"><span id="addIcon">+</span>
    </div>

  </div>

</div>

<div id="myModal">

  <div id="addModal">

    <h4 id="header">ADD ITEM</h4>
    <span class="myClose" id="close1">×</span>

    <hr>

    <table id="addTable">

      <tr id="step1">
        <td class="gridTitle">UPLOAD</td>
        <td></td>
        <td colspan="2">
          <label class="btn btn-file uploadBtns" id="upImgBtn">
            Upload Image
            <input type="file" accept="image/*" style="display: none;" id="upImg">
          </label>

          <label class="btn btn-file uploadBtns" style="margin-left:120px;" id="upDataBtn">
            Upload Data File
            <input type="file" style="display: none;" id="upData">
          </label>
        </td>
      </tr>

    </table>


  </div>
</div>

CSS

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
/* -- Edited Headers ----------------------- */

h4 {
  color: #333;
  display: inline-block;
  font-size: 1.6em;
  letter-spacing: 3px;
  font-weight: 500;
}
/* ---------------------------------------- */

.sideBar {
  position: relative;
  width: 18%;
  height: 90%;
  float: left;
  z-index: 100;
  border-right-style: solid;
  border-right-width: thin;
  border-right-color: #333;
  background-color: white;
}
/* -- Header & Location ------------- */

.headbar {
  height: 7%;
  background-color: ghostwhite;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px 1px #888888;
}
#myBtn {
  float: right;
  position: relative;
  padding: 9px 3px 0 0;
  cursor: pointer;
  display: inline-block;
}
.uploadBtns {
  padding: 10px 15px 10px 15px;
  background-color: blue;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 1px 5px 0 #888;
}
#myModal {
  display: none;
 position: fixed;
  z-index: 1000000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
}
/* Modal Content */

#addModal {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 800px;
  border-radius: 15px;
  color: #404040;
}
/* -- Add Location Pop Up CSS ------ */

#addTable {
  width: 100%;
  height: 200px;
  background-color: transparent;
  border-collapse: collapse;
}
td {
  background-color: transparent;
  border-bottom: 1px solid #333;
}
tr {
  height: 100px;
}
.gridTitle {
  padding-left: 15px;
}

JavaScript

var modal = document.getElementById('myModal');
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// Click Add Icon to make pop up appear
$("#myBtn").click(function() {
  $("#myModal").fadeIn("fast");
  $("#addModal").fadeIn("fast");
});

// Click 'x'
$("#close1").click(function() {
  $("#myModal").fadeOut("fast");
});

if (document.getElementById("myModal").style.display != 'none') {

  console.log("Pls don't be running twice.");
  $("#upImgBtn").on('click', function(evt) {
    evt.preventDefault();
    console.log("I clicked upload image button.");
  });

   document.getElementById("upData").addEventListener('click', function() {
    alert("I clicked upload data button.");
  });
}