JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
# <input type="text" id="num" name="more" value=''>
<button type="button" id="more" name="more">Create</button
<br>
<br>
<div class="container" id="inputcontainer">
    <div class="bl blue draggable"><input type="text" /></div>
    <div class="bl coral draggable"><input type="text" /></div>
    <div class="bl pink draggable"><input type="text" /></div>
</div>

CSS

html, body {
    margin:0px;
    padding:0px;
    width:auto;
    height:auto;
}
.container {
    margin:20px;
}
.bl {
    width:200px;
    height:200px;
    border-radius:10px;
    display:block;
    margin:5px;
    float:left;
}
.pink {
    background-color:#D91C5C;
}
.blue {
    background-color:#00ADEE;
}
.coral {
    background-color:#EE4036;
}

JavaScript

$(document).ready(function () {

    $('.container').on('click', '.pink', function () {
        $("<div class='bl pink'></div>").appendTo('.container').draggable();
    });

    $('.container').on('click', '.blue', function () {
        $("<div class='bl blue'></div>").appendTo('.container').draggable();
    });
    $('.container').on('click', '.coral', function () {
        $("<div class='bl coral'></div>").appendTo('.container').draggable();
    });
    
    $(".draggable").draggable();


});

function createMore(){
    var num = $('#num').val();
    for( var i = 0; i < num; i++ ) {
        $("#inputcontainer").append("<div class='bl blue draggable'></div>");
      $( ".draggable" ).draggable();
    }
}
$("#more").click(".add",createMore);