Sorting dynamic table in jquery

Question

Sorry but I'm completly new to js and jquery.

I got dynamic table which values are in localstorage. I can add new row, delete row, and edit cells. This is working.

I want to add a sorting this table by clicked colum. I found here code and try it. It just working when I write table and not use my javascript to add rows from localstorage. Table in two cases looks same in html code. I have no idead why sorting isnt working with dynamic table.

This is w/o my dynamic table from localstore, sorting as supposed to: http://jsfiddle.net/eW8Kg/1/

This is with table from localstorage(not working in jsfiddle?) on my comupter this is working good, but table is not sorting! (I left this static values): http://jsfiddle.net/XAu5G/

I think my problem can be in creation of table content:

var Html = "<tbody>";
for (var i = 1; i < localStorage.length; i++) {
    var input = "<td><input style='border:hidden' class=\"fields\" name = " + localStorage.key(i) + " type='text' onchange='change(\"" + localStorage.key(i) + "\")' /></td>"
    Html += "<tr class=\"field\">";
    for (var j = 0; j < 4; ++j) {                    
        Html += input;
    }
    var button = "<td><input type='button' value = 'Usuń' onclick='Remove(\"" + localStorage.key(i) + "\")'></td>";

    Html += button + "</tr>";
}
Html += "<tr id=\"actions\"></tr></tbody>"

document.getElementById("list").innerHTML += Html;

This jquery code do sorting:

$(document).ready(function() {

var table = $('#list');

jQuery.fn.sortElements = (function() {
var sort = [].sort;

return function(comparator, getSortable) {
    getSortable = getSortable || function() {return this;};

    var placements = this.map(function() {

        var sortElement = getSortable.call(this),
            parentNode = sortElement.parentNode,

            // Since the element itself will change position, we have
            // to have some way of storing it's original position in
            // the DOM. The easiest way is to have a 'flag' node:
            nextSibling = parentNode.insertBefore(
                document.createTextNode(''),
                sortElement.nextSibling
            );

        return function() {
            if (parentNode === this) {
                throw new Error(
                    "You can't sort elements if any one is a descendant of another."
                );
            }

            // Insert before flag:
            parentNode.insertBefore(this, nextSibling);
            // Remove flag:
            parentNode.removeChild(nextSibling);
        };

    });

    return sort.call(this, comparator).each(function(i) {
        placements[i].call(getSortable.call(this));
    });
};
})();

$('#x').click(function(){

    $('#list').hide();


});

$('#nazwa-header').wrapInner('<span title="sort this column"/>').each(function() {

    var th = $(this),
        thIndex = th.index(),
        inverse = false;

    th.on('click', function() {
        table.find('td').filter(function() {
            return $(this).index() === thIndex;
        }).sortElements(function(a, b) {
            console.log($(a).find('input').val(),$(b).find('input').val());
            return $(a).find('input').val() > $(b).find('input').val() ?
                inverse ? -1 : 1
                : inverse ? 1 : -1;
        }, function() {
            // parentNode is the element we want to move
            return this.parentNode; 
        });
        inverse = !inverse;
    });
});
});