JSFiddle - React, Tailwind, and code Playground

by chrischilcoat

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<br>
<div class="container">
  <small class="helper-text">Item Name Field: This is used to name the the link to the submitted form</small>
  <br>
  <div class="row">
    <div class="col-md-3">
      <h2><sup><i class="fa fa-question-circle"></i></sup> <span contenteditable="true" class="editable">Item Name:</span></h2>
    </div>
    <div class="col-md-8 preview">
      <span class="ybx-name-default">
      <input type="text" class="form-control" value="User Entered Text">
      <div class="help-block">
        <small contenteditable="true" class="editable">Click to add help text which display in edit mode</small>
      </div>
    </span>
      <span class="ybx-name-sel-choice">
      <div class="help-block">
      </div>
    </span>
      <span class="ybx-name-sel-options" style="display:none">
      <div class="alert alert-info">Options</div>
    </span>
    </div>
  </div>
  <div>

  </div>
  <div class="container-fluid ui-options-row">
    <div class="row">
      <div class="col-md-3 text-right">
        Date Stamp:
      </div>
      <div class="col-md-9">
        <span><input type="checkbox" checked="checked" class="toggle-year" /> Year</span>&nbsp;
        <span><input type="checkbox" checked="checked" class="toggle-month" /> Month</span>&nbsp;
        <span><input type="checkbox" checked="checked" class="toggle-day" /> Day</span>&nbsp;
        <span><input type="checkbox" checked="checked" class="toggle-time" /> Time</span>
      </div>
    </div>
  </div>
  <div id="panel">
   ...

CSS

.form-control.no-border {
  border: 0;
  display: inline-block !important;
  width: 60px;
  overflow: visible;
}

.form-control {
  /* border:0;   */
  display: inline-block !important;
  width: 200px;
  overflow: visible;
}

.form-control:hover {
  background: aliceblue
}

small {
  display: block;
  color: gray;
}

.help-block {
  margin-top: 10px;
}

sup {
  font-size: 18px;
  color: gray;
}

.helper-text {
  color: gray
}

#panel,
#flip {
  padding: 5px;
  text-align: left;
  background-color: #fff;
  border: solid 1px #fff;
}

#panel {
  display: none;
  background: #efefef;
  padding: 20px;
}

.presets {
  display: block;
  background: #efefef;
  padding: 20px;
}

.btn-show-default {
  display: none;
}

.preview b {
  padding: 10px 0;
  display: inline-block;

}

.preview b.editable:hover {
  border: none;
}

.preview input {
}

.ui-options-row {
  margin: 20px;
  display: none;
}

JavaScript

$(document).ready(function() {


  // Add Buttons
  $('#panel .btn-sm').click(function() {
    if ($(this).hasClass('btn-danger')) {
      $(this).removeClass('btn-danger')
      $(this).text('Add');
      $('.ybx-name-sel-choice b').last().remove();
      $('.ui-options-row').hide();

    } else {

      $(this).addClass('btn-danger')
      $(this).text('Remove');
      $(this).closest('.row').find('.ybx-name-sel').attr("contenteditable", "true").clone().appendTo('.ybx-name-sel-choice').tooltip('show').focus();




    };

    $('.ybx-name-default').hide();

    if ($(this).hasClass('ybx-showtimestamp')) {
      $('.ui-options-row').show();
    }

  });

  // Select Buttons
  $('.presets .btn-sm').click(function() {
    $('.btn-sm').removeClass('btn-success');
    $(this).addClass('btn-success')
    $('.ybx-name-sel-choice').html('');
    $(this).closest('.row').find('.ybx-name-sel').clone().appendTo('.ybx-name-sel-choice');
    $('.ybx-name-default').hide();

    if ($(this).hasClass('ybx-showtimestamp')) {
      $('.ui-options-row').show();
    } else {
      $('.ui-options-row').hide();
    }
  });



  $('.toggle-year').click(function() {
    $('.Y').toggle();
  });
  $('.toggle-month').click(function() {
    $('.M').toggle();
  });
  $('.toggle-day').click(function() {
    $('.D').toggle();
  });
  $('.toggle-time').click(function() {
    $('.T').toggle();
  });




  /*$('.btn-sm').click(function() {
    $('.btn-sm').removeClass('btn-success');
    $(this).addClass('btn-success')
    $('.ybx-name-sel-choice').html('');
    $(this).closest('.row').find('.ybx-name-sel').clone().appendTo('.ybx-name-sel-choice');
    $('.ybx-name-default').hide();

  });*/


  // Show Premade Title Chooser
  $('.btn-show-default ').click(function() {
    $('.ybx-name-sel-choice').html('');
    $('.btn-custom').show();
    $("#panel").hide();
    $('.btn-sm').removeClass('btn-success');
    $('.ybx-name-default').show();
    $(this).hide();
    $('.presets').show();

  });

 ...