Dynamiaclly append to grid row

Im trying to modify grid layout so that if the user clicks a grid row, another grid row is appended to the selected grid row and displays extra information about the selected g开发者_如何学Crid. Is this possbible using jQuery mobile ?

    <div class="ui-grid-a">
        <div class="ui-block-a"><div class="ui-bar ui-bar-b" style="height:20px">A</div>    
    </div>

It's not fully functional but I hope this give you an idea, Live Example: http://jsfiddle.net/F6Zdp/44/

HTML:

<div data-role="page" id="gridplus"> 
    <div data-role="content">
        <div class="ui-grid-a" id="currentgrid"> 
            <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:50px">I'm a Block and text inside will wrap.</div></div>
            <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:50px">I'm a Block and text inside will wrap.</div></div> 
        </div>
        <br />
        <input type="button" id="addcolumn" name="addcolumn" value="Add Column"/>
        <input type="button" id="removecolumn" name="removecolumn" value="Remove Column"/>
    </div>
</div>

JS:

var currentGrid = $('#currentgrid');
var previousGrid;

$('#addcolumn').click(function() {
    grid = currentGrid.attr('class');
    previousGrid = grid;
    nextGrid = grid.substring(0,grid.length-1)+String.fromCharCode(grid.charCodeAt(grid.length-1)+1);

    $('#currentgrid').removeClass(grid).addClass(nextGrid);
    $("#currentgrid").children().each(function() {
        c = $(this);
        block = c.attr('class');
        nextBlock = block.substring(0,block.length-1)+String.fromCharCode(block.charCodeAt(block.length-1)+1);

        if($('.'+nextBlock).length) {
            doNothing = true;
        } else {
            c.after('<div class="'+nextBlock+'"><div class="ui-bar ui-bar-e" style="height:50px">I\'m a Block and text inside will wrap.</div></div>');
        }
    });
});

$('#removecolumn').click(function() {
    grid = currentGrid.attr('class');
    $('#currentgrid').removeClass(grid).addClass(previousGrid);
    $("#currentgrid").children().last().remove();
}).page();

Use collapsable content - http://jquerymobile.com/demos/1.0a4.1/docs/content/content-collapsible.html

The content can be a jQuery grid I think.