JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
   <div class="container">
   <h2> Menu </h2>
   <div id="menu" class="connectedSortable"></div>
 
   <h2> BOtoes </h2>
   <div id="content" class="connectedSortable"></div>
   </div>

JavaScript

var arrSequencia = [1,2,3,4,5];
var strInterface ="";

$(document).ready(function(){
    $("#menu").append(appendMenu());

    $('#content').sortable({ items: 'ul' });
    $( "#menu" ).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
    
for(var i =0; i< arrSequencia.length;i++ ){
    strInterface += "<ul class='formulario'>"+
                "<li class='col-md-1'>"+
                "   <input type=\"button\" class=\"btn btn-danger btn-info-bloco sembloco\" value=\"Botao "+arrSequencia[i]+"\"/>"+
                "</li>"+
                "</ul>";
}
    $("#content").append(strInterface);                       
});

    function appendMenu(){
        return "<ul>"+
        "<li>" +
            "<input type=\"text\" class=\"form-control bloco-valor\" placeholder=\"Digite\" aria-describedby=\"basic-addon1\"/>"+
        //"</div>"+
        "</li>"+
        "</ul>";
    }

function adicionaOuRemove() {
    var botoes = document.getElementsByClassName("btn-info-bloco");
    for(var i=0;i<botoes.length;i++){
        botoes[i].addEventListener('click', acaoBotao, false);
    }
}
adicionaOuRemove();