JSFiddle - React, Tailwind, and code Playground

by princefiddle

HTML

<div id="sec1" style="height:100px; width:400px; background-color:#0F0"></div>
<div id="sec2" style="height:100px; width:400px; background-color:#0F3"></div>
<div id="sec3" style="height:100px; width:400px; background-color:#309"></div>

<div id="dialog-form" title="Add Section">
  <p class="validateTips">All form fields are required.</p>
 
  <form>
  <fieldset>
      
      <div class="add_new">Add</div>
      <input type="text" id="new_field"/>
      <div id="save_new">save</div>
      
      
  <label for="divdata">Divs</label>
   <select name="divdata" id="divdata">
    <option value="<div class='add'>Div1</div>">Div1</option>
    <option value="<div class='add'>Div2</div>">Div2</option>
    <option value="<div class='add'>Div3</div>">Div3</option>
    <option value="<div class='add'>Div3</div>">Div4</option>
    <option value="<div class='add'>Div4</div>">Div5</option>
    <option value="<div class='add'>Div5</div>">Div6</option>
    <option value="<div class='add'>Div6</div>">Div7</option>
    <option value="<div class='add'>Div7</div>">Div8</option>
    <option value="<div class='add'>Div8</div>">Div9</option>
</select>
      
      </br>
      
  <label for="section">Section</label>
<select name="section" id="section">
    <option value="sec1">Section1</option>
    <option value="sec2">Section2</option>
    <option value="sec3">Section3</option>
</select>

  </fieldset>
  </form>
</div>
<div class='add'></div>

<input name="add" type="button" id="add" value="add" />
<div class="textarea-top">

<div class="textarea-bold">
<div class="bold-txt">Bold</div>
</div>


<div class="textarea-size">
<div class="size-txt">Text Size</div>
</div>

<div class="textarea-align">
<div class="align-txt">Align</div>
</div>

</div>

JavaScript

$(function() {


    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Add": function() {
            section = $( "#section" ).val();
            divdata = $( "#divdata" ).val();
            divstring="'"+divdata+"'";
           // $( ".add" ).appendTo( $( "#"+section) );
            $( divdata ).appendTo( $( "#"+section) );
           
            $("#divdata option[value="+ divstring+"]").remove();
      },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
       
      }
    });
    
    
    
$("#add").click(function() {
    
    $( "#dialog-form" ).dialog( "open" );
    $("#new_field").hide();
    $("#save_new").hide();

});
    
$(".add_new").click(function() {
    $(".add_new").hide();
    $("#new_field").show();
    $("#save_new").show();

});

$("#save_new").click(function() {
    
    $( "#divdata" ).append($('<option>', {
    value: "<div class='add'>"+$("#new_field").val()+"</div>",
    text:  $("#new_field").val(),
    class:'add',
    }));
    
    $("#new_field").hide();
    $("#save_new").hide();
    $(".add_new").show();
    
});
    

});