JSFiddle - React, Tailwind, and code Playground

by anish274

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<div id="divFields">
    <ul>
        <li>iPhone</li>
        <li>iPod</li>
        <li>iPad</li>
    </ul>
</div>
<br />
<input type="button" value="add box" onclick="add_field();" />
<br /><br />
<div class="divDroppedFields ui-widget-content">
    <textarea id="txtMessageFields" name="[asdfsdf][werert][text4etre]" cols="20" rows="1"></textarea>
    <div id="content_box"></div>
</div>

CSS

#divFields
{ 
    margin-right: 2em;
}
#divFields li
{
    cursor: move;
}

JavaScript

$(document).ready(initialize);

function initialize() {
    
    $("#divFields li").draggable({
        appendTo: "body",
        helper: "clone"
    });


    $(".divDroppedFields textarea").droppable({
        accept: "#divFields li",
        drop: function (event, ui) {
            var val_1 = $(this).attr("name"); 
           
            var val_2 = val_1.replace(/(\[|\])/g,'\\$1');
            
            $('[name='+val_2+']').val(ui.draggable.text());
        }

    });
}

var i = 1;

function add_field() {
 
    i = (i + 1);
    var html = '<textarea id="txtMessageFields" name="[asdfsdf][werert][text'+i+']" cols="20" rows="1"></textarea>';
    
    $('#content_box').append(html);   
    initialize();
}