JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multiselect-widget/2.0.1/jquery.multiselect.filter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multiselect-widget/2.0.1/jquery.multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multiselect-widget/2.0.1/jquery.multiselect.css">
<div class="well well-small"> <a class="btn btn-warning" href="#chargeAdd" data-toggle="modal" data-backdrop="static" style="margin-right: 5px;">add</a>
</div>
<div id="chargeAdd" class="modal hide ui-front">
<div id="maincontainer2" class="clearfix">
<!-- header -->
<div class="modal-header noprint"> <a class="close" data-dismiss="modal">×</a>
<h3>TITLE</h3>
</div>
<div class="modal-body">
<div class="alert" id="addMessage" style="display: none;">
</div>
<form class=" validate" method="post" >
<div class="control-group">
<div class="row-fluid">
<div class="span6">
<div class=" groupUnit">
<div class="pull-right">
<label>Option <span class="ewmsg">*</span></label>
...
JavaScript
$(".multiSelect").multiselect();