JSFiddle - React, Tailwind, and code Playground

by valk

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class='wrapper'>
<b>Preset Screens:</b>
<select id="state" class="js-example-basic-single" type="text" style="width:90%">
  <option value="0">None</option>
  <option value="1">Lowest Cost Socially Responsible Investing</option>
  <option value="3">Lowest Cost U.S. Large Cap ETFs </option>
  <option value="4">Most Liquid U.S. Mid Cap ETFs</option>
  <option value="5">Top Performing High Yield U.S. Equities</option>
  <option value="6">Top Yielding U.S. Govt. Bond ETFs</option>
</select>
<br><br>
<label for="new-state">You can create your own preset from the current search:</label>
<input id="new-state" type="text"  placeholder="Type your preset name"/>
<button class='btn btn-success' type="button" id="btn-add-state">
<img src="http://www.pngmart.com/files/7/Save-PNG-Transparent-Image.png">
Add Preset
</button>

<button class='btn' type="button" id="btn-copy-url">Copy Preset URL</button>

</div>

CSS

.wrapper { margin: 40px; }  
 img { width: 14x; height: 14px; margin: 0 4px 0 0; }
 #btn-add-state { color: black; }
 label { display: block; font-weight: normal; }

JavaScript

$(document).ready(function() {
    $("#state").select2({
      tags: true
    });
      
      
     $("#btn-copy-url").on("click", function(){
       $(this).html('URL copied!')
     });
     
    $("#btn-add-state").on("click", function(){
      var newStateVal = $("#new-state").val();
      // Set the value, creating a new option if necessary
      if ($("#state").find("option[value='" + newStateVal + "']").length) {
        $("#state").val(newStateVal).trigger("change");
      } else { 
        // Create the DOM option that is pre-selected by default
        var newState = new Option(newStateVal, newStateVal, true, true);
        // Append it to the select
        $("#state").append(newState).trigger('change');
      } 
    });  
});