JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<ul class="sidebar">
</ul>

      <div id="myModal" class="modal">
                                  <!-- Modal content -->
                                  <div class="modal-content">
                                    <h1 id="modalTitle">
                                    </h1>
                                    <span class="close">&times;</span>
                                    <div id="modalVideo">
                                    </div>
                                  </div>
                                
                              </div>

CSS

video {
  width: 400px;
  height: 300px;
  display: block;
  margin: 30px;
}

  .block-edit{
    width: 30px;
    height: 15px;
    /* background-color: red; */
    position: absolute;
    right: 0px;
    cursor: pointer;
    z-index: 9999999;
   /*  background-color: red; */
  }
.sidebar_movie-block{
  position: relative;
  width: 400px;
  height: 400px;
  overflow:hidden;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  z-index: 999999999999999;
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  height: 60%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

JavaScript

$(function() {
  var movies = [{
      "title": "travel",
      "left": 201,
      "top": 209,
      "movieid": "10",
      "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
      "buttons": [{
        "left": 81,
        "top": 51,
        "start_time": 1,
        "end_time": 2,
        "buttonid": "10_1",
        "btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
      }]
    },
    {
      "title": "ecommerce",
      "movieid": "20",
      "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
      "buttons": [{
        "left": 0,
        "top": 0,
        "start_time": 1,
        "end_time": 2,
        "width": '200',
        "height": '60',
        "buttonid": "20_1",
      }]
    }
  ];

  function formatTitle(t) {
    var nt = t[0].toUpperCase();
    nt += t.slice(1);
    return nt;
  }

  function makeListItem(v, p) {
  var li = $("<div id='" + v.movieid + "' class='sidebar_movie-block'>");
    var title = $("<h1>", {
      class: "title",
      for: "video_" + v.movieid
    }).html(formatTitle(v.title)).appendTo(li);
    
      var edit = $("<span>", {
            class: "block-edit fa fa-edit",
            for: "video_" + v.movieid,
            
    }).appendTo(li);
    var vObj = $("<video>", {
      id: "video_" + v.movieid,
      src: v.movie_url
    }).appendTo(li);
    li.appendTo(p);
  }

  function getVideoList() {
    $.each(movies, function(index, dataValue) {
      makeListItem(dataValue, $(".sidebar"));
    });
  }

  getVideoList();
  
  
  
  var modal = $("#myModal");

// When the user clicks the button, open the modal 
$(".block-edit").on("click", function(){
    $("#myModal").css("display", "flex");

})

// When the user clicks on <span> (x), close the modal
$(".close").on("click", function(){
    $("#myModal").css("display", "none");
})

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display =...