JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by DugSohn

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/stylesheets/jquery.sidr.light.min.css">
<br/>
<div class="container">
  <div class="row">
       <div class="col-lg-12">
     <div class="button-group">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">-- Select Here <span class="caret"></span></button>
<ul class="dropdown-menu">
  <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a></li>
  <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li>
  <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 3</a></li>
  <li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 4</a></li>
  <li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 5</a></li>
  <li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 6</a></li>
</ul>
  </div>
</div>
  </div>
</div>

SCSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700);

.ui-yakaimage {

display: inline-block;
background-color: rgba(0,0,0,.2);
box-shadow: inset 0 0 2px rgba(0,0,0,.6);
}
.addCondition {
	
	    font-size: 10px;
    text-align: center;
    margin: 0 auot;
    margin-left: -17px;
    margin-top: -10px;
    opacity: .4;
    margin-bottom: 20px;
    display: block;
	
}


.ui-builder {
  
  .form-group {
    border-top: none;
  }
    .form-group:hover {
    background: transparent;
  }
    
.row > div[class^="col-"] {
    background-color: #fff;
    border: 1px solid #fff;
    padding: 15px 0;
    text-align:left;
    flex:1 0 0 ;
    min-height:40px
    }
    

.row.ui-builder-has-layout > div[class^="col-"] {
    box-shadow: inset 15px 0 0 #f5f5f5, inset -15px 0 0 #f5f5f5, inset 0 15px 0 #f5f5f5, inset 0 -15px 0 #f5f5f5;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 15px 0;
    text-align:left;
    flex:1 0 0 ;
    min-height:40px
    }
    
    .row > div[class^="col-"] > .row {
    margin: -15px 0;
    }
    
    .row {
    display:flex;
    flex-direction:row;
}
}

.ui-yakabox-dash-button-wrapper {
  display: none;
}


.ui-builder-has-layout .ui-yakabox-dash-button-wrapper {
  display:block;
    text-align: center;
    width: 100%;
    position: absolute;
    left: 47.5%;
    z-index: 498;
    height: 1px;
    bottom: 8px;
}

.ui-yakabox-dash-button-wrapper button {

    background-color: transparent;
    border:none;
    margin-right: -1px;
    color: #999;
    float: none;

}

.btn-default:hover, .btn-default:hover .fa {
  color:#000;
}

.ui-dash-widget-tools {
right: 4px;
top: 35%;
height: 40px;
width: 13px;
position: absolute;
z-index: 3000;


.ui-dash-widget-menu {
  display:none;
  top: 0;
height: 100%;
}

}

.ui-dash-widget-tools.hover, .ui-dash-widget-tools:focus {
right: 0;
top: 0;
height: 100%;
width: 320px;;
position: absolute;
z-index: 3000;
background-color:...

JavaScript

var options = [];

$( '.dropdown-menu a' ).on( 'click', function( event ) {

   var $target = $( event.currentTarget ),
       val = $target.attr( 'data-value' ),
       $inp = $target.find( 'input' ),
       idx;

   if ( ( idx = options.indexOf( val ) ) > -1 ) {
      options.splice( idx, 1 );
      setTimeout( function() { $inp.prop( 'checked', false ) }, 0);
   } else {
      options.push( val );
      setTimeout( function() { $inp.prop( 'checked', true ) }, 0);
   }

   $( event.target ).blur();
      
   console.log( options );
   return false;
});