using sortable dynamically

Question

every time I drag and "drop" the bar from input of the kind text within the buttons, the same input bar must be generated below the header menu .

Problem:

Every time I drop the input inside the buttons, this same input disappears and does not generate a new one. how to implement this part?

  <h2> Menu </h2>
  <div id="menu" class="connectedSortable"></div>

  <h2> Botoes </h2>
  <div id="tbody-content" class="connectedSortable"></div>

sortable

$("#menu").append(appendMenu());

$('#tbody-content').sortable({ items: 'ul' });
$( "#menu" ).sortable({
    connectWith: ".connectedSortable"
}).disableSelection();

In the jsFiddle

Answer 1

From what I understood it would be to add a new text box in the button area by performing a "clone".

http://jsfiddle.net/bqe3t523/

$('#content').sortable({ 
    items: 'ul',
    revert: "invalid"
}).droppable();

$( "#menu" ).draggable({
  helper: 'clone',
  connectToSortable: "#content"
}).disableSelection();