JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<li class="men_5l" ><a id = "pop" href="#"><span><img src="images/menu_5_1.PNG" alt=""></span> <p>Mp3</p></a></li>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            
                
            </div>
            <div class="modal-body">
              
              <Select>
              <option>1</option>
              <option>2</option>
              </Select>

JavaScript

$(document).ready(function () {
  $("#pop").click(function () {
    $('#myModal').modal('show'); 
  });
});