JSFiddle - React, Tailwind, and code Playground

Select List

by DugSohn

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="jquery.sidr.light.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/nd1mexyy0xevhv5/6fdc3a856a26e706a3edad566422a903.css?dl=0/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css">
<body class="ui-app ui-global-nav " ui-app-id="39" role="application">
  <div id="ybx-broadcast" style="border: medium none;" class="ui-dialog-content ui-widget-content"></div>
  <div id="ybx-panel" style="display: none;" class="ui-yakabox-panel ui-bootstrap">
    <div class="ui-yakabox-panel-trigger"><a class="ybx-panel-trigger btn btn-primary"><i class="fa fa-fw fa-2x fa-chevron-left"></i></a></div>
    <div class="ybx-panel-panewrapper ui-yakabox-panel-panewrapper ui-background-flat ui-border-none">
      <div class="ybx-panel-contentpane ui-yakabox-panel-content ui-helper-clearfix">
        <div class="ybx-panel-navpane ui-buttonset-navpane btn-group"><button class="ybx-panel-navback ui-corner-all btn btn-link" title="Back"><i class="fa fa-arrow-right fa-rotate-180 fa-fw"></i></button><button class="ybx-panel-navforward ui-corner-right ui-corner-all btn btn-link" title="Forward"><i class="fa fa-arrow-right fa-fw"></i></button></div>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-inverse navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
        <a class="navbar-brand"...

SCSS

input[type="checkbox"] {
	margin-right:8px;
}

.ui-widget .btn-xs {
	font-size:10px;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
    font-size:14px;
}
.input-group {
	margin-bottom:-1px;
border-radius: 0;

}
.fa {
	color:#ccc
}
.fa-ellipsis-v {
  cursor: move;
}

.btn:focus .fa, .input-group-addon:focus .fa {
	color:red
}


.ui-widget .ui-widget #dialogContent{
    font-size: 1em;
    overflow: hidden;
}

.input-group-addon {
    padding: 6px 2px ;
}
.input-group-addon {
    padding-right: 2px !important ;
    padding-left: 2px !important ;

}


.btn:hover .fa, .input-group-addon:hover .fa {
	color:red
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1;
    color: #aaa;
    
}

.ui-container-show > input[type="text"] {
  width:50%;
}
.ui-container-show .ybx-container-select {
  width:50%;
  border-radius: 0 !important;
  -webkit-appearance: none;
  margin-left:-1px;

}

.input-group-addon {
  width:6px;
}

.ui-disabled .btn-default { background-color: #ececec}
.ui-disabled .fa-eye-slash { color:red}

.ui-disabled {
  
  input[type="text"] {
    width:100%;
}
    
    select { 
      display:none !important;
    }
}

.ui-container-show .input-group-btn .ybx-disable {
      margin-left: -2px !important;
  
}

.ui-dialog {
   box-shadow: 3px 3px 4px #ccc;
   border:1px solid #ccc;
  .ui-dialog-titlebar {
    background-image:none;
    background:#ccc;
    border-radius:0;
    
    }
}

JavaScript

$('.input-group').on('click', '.fa-remove', function() {

  var retVal = confirm("You are about to delete a select-list option. This means that all previous submissions of this form will now show a blank value for this field. Filtered reports based on this select-list option will no longer be available (including past reports you may have saved in your App). To simply remove this option for future records, cancel this window and click disable.");
  if (retVal == true) {
    $(this).closest('.input-group').fadeOut('slow');
  } else {}

});


$('input[type="text"]').on('blur', function() {
  if ($(this).val()) {
    $(this).closest('.input-group').find('.ybx-disable').show();
  }
});


$('#btnAddSelectOpt').click(function() {
  $('.ybx-blank').clone(true).insertAfter("div.options .col-md-12:last-child .input-group:last-child").removeClass('ybx-blank').show();


});

$('.ybx-disable').click(function() {
  var $this = $(this),
    $thisGroup = $this.closest('.input-group');

  if ($thisGroup.find('.fa').hasClass('fa-eye')) {

    $thisGroup.addClass('ui-disabled');
    $thisGroup.find('input').attr('disabled', 'disabled');
    $thisGroup.find('.fa-eye').removeClass('fa-eye').addClass('fa-eye-slash');

  } else {

    $thisGroup.removeClass('ui-disabled');
    $thisGroup.find('input').prop('disabled', false);
    $thisGroup.find('.fa-eye-slash').removeClass('fa-eye-slash').addClass('fa-eye');

  }

});


$('#showContainerBox').click(function() {
  var $this = $(this);

  if ($this.is(':checked')) {
    $('.ybx-container-select').show();
    $('.input-group').addClass('ui-container-show');
    $('.input-group').addClass('input-group-sm');

  } else {
    $('.ybx-container-select').hide();
    $('.input-group').removeClass('ui-container-show');
    $('.input-group').removeClass('input-group-sm');

  }
});

$('button').tooltip({
  hide:'false',
  position: { my: "center top+20", at: "left center", collision: "flipfit" }
});