Append additional html to cloned object in jquery

$(function(){
  var item_id=0;
  
  // function to clone your element
  var newItem=function(){
    item_id++;
    return $('#clone')
      .clone(true, true)
      .attr({'id':'citem_'+item_id, 'class':'row cartItem_'+item_id})
      .css('display','block')
      .appendTo('#all-items');
  };
  
  // Clone element and edit what you want
  newItem().html('hobby').css('color','blue');

  // Clone element and append what you want
  newItem().append(' - <i>spaghetti</i>');
  
  // You can also find element by id
  $('#citem_2').css('color','red');
  
  //You can add buttons to do it
  $('button:eq(0)').on('click',function(){
    newItem().html('Your <b>html</b> here.');
  });
  $('button:eq(1)').on('click',function(){
    newItem().append(' - Your <b>html</b> here.');
  });
});

<button>New clone</button>
<button>New clone + append</button>
<div id="all-items">
  <div id="clone">pizza</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

$(function() {
  //! Cloning the HTML
  var $clonedContent = $('.content').clone();

  // Manipulate the cloned element
  // -- Update the existing content
  $clonedContent.find('h5').text("My content just got manipulated");

  // -- Adding raw HTML content
  $clonedContent.append("<small> It's a raw HTML </small>");

  // -- Adding property to an existing content
  $clonedContent.find('small').addClass('make-me-day');

  //! Getting another cloned content
  var $anotherClonedContent = $('.content').clone();
  
  // -- Another manipulation of another cloned content
  $anotherClonedContent.find('h5').text("This is another cloned content");
  
  // -- Manipulate the another cloned content's content
  $anotherClonedContent.find('h5').addClass('make-me-day');

  // -- Add another cloned content to the already manipulated & cloned content.
  $clonedContent.append($anotherClonedContent);

  //! Finally, add the clonedContent to the DOM, aaaand.. add more HTML afterwards.
  $('#main').append($clonedContent, "<em> I added this HTML after the cloned object </em>");
  
});

.make-me-day {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="content">
    <h5> Just a simple content </h5>
  </div>
</div>

// Constants
var number = 1;
var revealed = false;

// The cloning function
$("#cloneIt").click(function(){
    var cloning = $("#Human")
    .clone()
    .attr({"id": "Clone_number_"+number, "class":"clone"})
    .appendTo("#CloneBucket");

    $(this).val("Clone him again! It's fun!");

    number++;
    if(number==4){
        $(".reveal").show();
    }
    if(number==9){
        $(this).val("Enought! This is now illegal.").prop("disabled",true);
    }

    // Add them to select
    var options="<option disabled selected class='deceased'>KILL THEM!</option>";
    for (i=1;i<number;i++){
        if( $("#CloneBucket").children().eq(i-1).hasClass("dead") ){
            options += "<option value='"+i+"' class='deceased'>Clone #"+i+"</option>";
        }else{
            options += "<option value='"+i+"'>Clone #"+i+"</option>";
        }
    }
    $("#cloneSelect").html(options);

    if(revealed){
        reveal();   // Sub function to add clones to a select element.
    }
});

// Reveal clone numbers
$(".reveal").click(function(){
    reveal();

    setTimeout(function(){
        $(".reveal").val("Kill a clone! (While it's not illegal!)").removeClass("reveal").addClass("shoot");
    },50);

});

// Kill button
$("#page").on("click",".shoot",function(){
    $(this).prop("disabled",true).val("Select one");
    $("#cloneSelect").show();
});

// Select kill target
$("#cloneSelect").change(function(){
    var thisCloneIs = parseInt($(this).val());
    var niceShot = "#Clone_number_"+thisCloneIs;
    $(niceShot).css({"opacity":0.3,"color":"red"});
    $(niceShot+" .definition").html("I was the number"+thisCloneIs).parent().addClass("dead");

    // Redish the option
    $(this).find("option").eq(thisCloneIs).prop("disabled",true).addClass("deceased");
    $(this).find("option").eq(0).prop("selected",true);

    // Bravo!
    var allDead = [];
    setTimeout(function(){
        $("#cloneSelect").find("option").each(function(index){

            if( $("#cloneSelect").find("option").eq(index).hasClass("deceased") ){
                allDead.push(true);
            }else{
                allDead.push(false);
            }
        });

        if( allDead.indexOf(false)==-1 ){

            // Reset this super gaming experience for a new.
            $("#CloneBucket").html("");
            $(".shoot").addClass("reveal").removeClass("shoot").val("Reveal clone numbers!").prop("disabled",false).hide();
            $("#cloneIt").val("Clone again?").prop("disabled",false);
            $("#cloneSelect").html("").hide();
            revealed = false;
            number = 1;
        }
    },50);
});

function reveal(){
    $(".clone .definition").each(function(index){
        var cloneIndex = index+1;   // zero-based
        $(this).html("I'm the number "+cloneIndex);
        revealed = true;
    });
}

img{
    width:60px;
}
div{
    text-align:center;
}
.reveal{
    display:none;
}
#CloneBucket div{
    display:inline-block;
    padding:10px;
}
#CloneBucket{
    margin:0 auto;
    text-align:center;
}
select{
    display:none;
    margin:0 auto;
}
.deceased{
    color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="page">
    <input type="button" id="cloneIt" value="Want to clone him?"><br>
    <br>
    <div id="Human">
        <img src="http://image.flaticon.com/icons/svg/10/10522.svg"><br>
        <span class="definition">I'm a real human!</span>
    </div>
    <br>
    <input type="button" class="reveal" value="Reveal clone numbers!">
    <select id="cloneSelect"></select>

    <div id="CloneBucket"></div>
    <br>
</div>