jQuery - changed element won't clone

Question

I have changed the html text of an element, in this case #main_cluster_id_reach_12

$("#main_cluster_id_reach_12").html( '400' ).effect("highlight", {color: '#2a6500'}, 60000 * 5);

That works fine but when I try to clone the container that is holding it(#applications), it doesn't contain the updated html of #main_cluster_id_reach_12 but rather the original text that loaded with the page. Here is how I am cloning it:

var $applications = $('#applications');
var $data = $applications.clone();

What am I doing wrong?

edit: Here is the js and html. I am using jquery 1.7.2

What i am trying to do is update the reach of a group of clusters on a 10 second interval via ajax and then resorting the li items with quicksand ordered by their reach. The updating occurs without problem but quicksand clones the original list, not the updated list. This morning i've been playing with some logging and it appears the cloning is happening before the ajax update completes.

// quicksand sorting plugin
(function($) {
  $.fn.sorted = function(customOptions) {
    var options = {
      reversed: true,
      by: function(a) { return a.text(); }
    };
    $.extend(options, customOptions);
    $data = $(this);
    arr = $data.get();
    arr.sort(function(a, b) {
      var valA = options.by($(a));
      var valB = options.by($(b));
      if (options.reversed) {
        return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;              
      } else {      
        return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;  
      }
    });
    return $(arr);
  };
})(jQuery);


$(document).ready(function(){
    //loop through all reaches to update
    setInterval(function() {
        //reach
        $("[id^='main_cluster_id_reach_']").each(function(){

            //Check for reach updates

            //get cluster id first
            var cluster_id = parseInt(this.id.replace("main_cluster_id_reach_", ""));

            //get cluster reach         
            $.post("./lib/ajax/meme_cluster_update.php", { cluster_id: cluster_id }, 
                function(data) {

                //get reach - new
                var new_reach = 0;

                new_reach = parseInt(data.ItemReach, 10);

                //get reach - old
                var reach = $("#main_cluster_id_reach_" + cluster_id).html();

                // Format as American input
                reach = parseInt(reach.replace(/[^\d\.\-\ ]/g, ''));

                //compare new vs old and change cell view
                compareReach(cluster_id, reach, new_reach);

             }, "json");
        });

        // get the first collection
        var $applications = $('#applications');

        // clone applications to get a second collection
        var $data = $applications.clone();

        var $filteredData = $data.find('li[data-type=app]');

        var $sortedData = $filteredData.sorted({
            by: function (v) {
                return parseFloat($(v).find('span[data-type=size]').text());
            }
        });

        // finally, call quicksand
        $applications.quicksand($sortedData, {
            duration: 800,
            easing: 'easeInOutQuad'
        });
    }, 10000);

    //compare the reaches to update accordingly
    function compareReach(cluster_id, reach, new_reach) {
        //determine what color to change cells
        if(new_reach > reach) {
            $(".main_cluster_id_reach_" + cluster_id).html( new_reach ).effect("highlight", {color: '#2a6500'}, 60000 * 5);
        }
        else if(new_reach < reach) {
            $(".main_cluster_id_reach_" + cluster_id).html( new_reach ).effect("highlight", {color: '#990004'}, 60000 * 5);
        }
    }

html

 <div class="span-24" id='demo'>
        <ul id="applications" class="image-grid">
            <li data-id="id-210639" data-type="app" class='cluster'>
                <div class='cluster_byline'>@awkwardisco</div>
                <div class="cluster_padding">
                    <span class='cluster_headline'>Avengers on Thursday!!!</span>
                    <br>
                    <div class="cluster_stats">
                        <div class="span-2 reach">
                            <strong>REACH</strong>
                            <p id="main_cluster_id_reach_210639">26777</p>
                            <span class="main_cluster_id_reach_210639" data-type="size">26777</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

Answer 1

Thanks for all the help everyone. I came across a solution on another thread that works. It's not pretty or probably even ideal from a js perspective but it's working. What i'm doing is counting the number of items that are going through the each loop and then when that number is reached in the ajax .post, ie signaling that the last ajax call is complete, I run the clone and quicksand operations.

setInterval(function() {
        var flag = 0; //to determine when each is complete

        var count = $("[id^='main_cluster_id_reach_']").length;

        //reach
        $("[id^='main_cluster_id_reach_']").each(function(){

            //Check for reach updates

            //get cluster id first
            var cluster_id = parseInt(this.id.replace("main_cluster_id_reach_", ""));

            //get cluster reach
            $.post("./lib/ajax/meme_cluster_update.php", { cluster_id: cluster_id }, 
                function(data) {

                //get reach - new
                var new_reach = 0;

                new_reach = parseInt(data.ItemReach, 10);

                //get reach - old
                var reach = $("#main_cluster_id_reach_" + cluster_id).html();

                // Format as American input
                reach = parseInt(reach.replace(/[^\d\.\-\ ]/g, ''));

                //compare new vs old and change cell view
                compareReach(cluster_id, reach, new_reach);

                flag++;

                //if ajax is done then sort
                if(flag == count) {
                    console.log("Flags Equal, Each Complete, Now Sort");
                    quicksandSort();
                }

             }, "json");            
        }); 
    }, 10000);

    //sort with quicksand
    function quicksandSort() {
        // get the first collection
        var $applications = $('#applications');

        // clone applications to get a second collection
        var $data = $applications.clone(true);

        var $filteredData = $data.find('li[data-type=app]');

        var $sortedData = $filteredData.sorted({
            by: function (v) {
                return parseFloat($(v).find('span[data-type=size]').text());
            }
        });

        // finally, call quicksand
        $applications.quicksand($sortedData, {
            duration: 2000,
            easing: 'easeInOutQuad'
        }); 
    }