JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>
<script>
$(document).ready(function(){
var arrSelected = [];
$(".view-table").hide();
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
$("#id_view_details tbody").append("<tr> <td>"+2+"</td></tr>");
});
/* $('#multiselect1').on('change', function(){
var selected = $(this).find("option:selected");
selected.each(function(){
if(arrSelected.indexOf($(this).val())){
arrSelected.push($(this).val());}
$(".view-table").show();
$("#id_view_details tbody").append("<tr><td>"+$(this).val()+"</td></tr>")
});
console.log(arrSelected);
}); */
$('#multiselect1').on('change', function(){
var selected = $('#multiselect1').val();
if(selected){
$(".view-table").show();
$("#id_view_details tbody").append("<tr> <td>"+selected+"</td></tr>");
}
});
});
</script>
</head>
<body>
<div class="form-group">
<select id="multiselect1" class="selectpicker" id="drop" multiple data-live-search="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="form-group view-table">
<label for="view_detail">Views: </label>
<table class="table table-sm table-hover" id="id_view_details" >
<thead>
<tr>
...