JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<div>
              <form id="create_menu_item">
                <ul class="add_remove_list">
                    <li><h4>Add Menu Item</h4></li>
                    <li><input id="new_menu_name" type="text" name="new_menu_name" placeholder="Please enter your menu title">
                        <input class="add_menu_item" name="add_menu_item" value="Add" type="button">
                    </li>
                    <li class="clear"><h4>Menu Items</h4></li>
                      <li><div id="created_buttons">  </div></li>
                </ul>
                    </form> 
                </div>

CSS

form#create_menu_item{ width:920px; }
form#create_menu_item input#new_menu_name{ padding:5px; float:left; margin:0 10px 10px 0; }
form#create_menu_item input.add_menu_item{
    font-size:11px;
    width:60px;
    height:27px;
    display:block;
    -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; border-radius:3px;
    background:#f5f5f5; background: -moz-linear-gradient(100% 100% 90deg, #eee, #fcfcfc); background: -webkit-linear-gradient(#fcfcfc, #eee) !important; background: -o-linear-gradient(#fcfcfc, #eee);
    border:1px solid #ccc;
    color:#666;
    padding-bottom:3px;
    float:left;
}
div.div_menu_button{
    font-size:12px;
    width:295px;
    height:16px;
    display:block;
    -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; border-radius:3px;
    background:#f5f5f5; background: -moz-linear-gradient(100% 100% 90deg, #eee, #fcfcfc); background: -webkit-linear-gradient(#fcfcfc, #eee) !important; background: -o-linear-gradient(#fcfcfc, #eee);
    border:1px solid #ccc;
    color:#666;
    padding:10px;
    margin:0 0 10px 0;
    cursor:move !important;
}
div#created_buttons{ width:680px; border:1px solid #eee; min-height:400px; padding:10px;}
.clear{ clear:both;}

JavaScript

$(".add_menu_item").click(function() {
    var value = $(this).prev().val();
    if (value.length) {
        $('#created_buttons').append(
            $('<div class="div_menu_button"></div>').val(value).text(value) );
            $( ".div_menu_button" ).draggable({ axis: "x" },{grid: [ 40 ]},{ containment: "parent" });
    }
});