JSFiddle - React, Tailwind, and code Playground

by abhijeetkarve

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/crlcu/multiselect/v2.5.1/dist/js/multiselect.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <select name="from[]" id="NNN" class="form-control" size="8" multiple="multiple">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
      <option value="5">Item 5</option>
    </select>
  </div>

  <div class="col-xs-2">
    <button type="button" id="NNN_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
    <button type="button" id="NNN_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
    <button type="button" id="NNN_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
    <button type="button" id="NNN_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
  </div>

  <div class="col-xs-5">
    <select name="to[]" id="NNN_to" class="form-control" size="8" multiple="multiple"></select>

    <div class="row">
      <div class="col-xs-6">
        <button type="button" id="NNN_move_up" class="btn btn-block"><i class="glyphicon glyphicon-arrow-up"></i></button>
      </div>
      <div class="col-xs-6">
        <button type="button" id="NNN_move_down" class="btn btn-block col-sm-6"><i class="glyphicon glyphicon-arrow-down"></i></button>
      </div>
    </div>
  </div>
</div>

JavaScript

jQuery(document).ready(function($) {
    $('#NNN').multiselect();
});