Q:

How to add a cell to a table and then wrap after N columns

I have a single column table with a header. When some other element on the page is selected, an identifier is dynamically added as a new row:
Identifiers
789654    
321478    
963258    
741825    
917382    
147896

This works fine, but it can sometimes make the page quite long. It has been proposed that we add columns initially rather than rows and then create a new row once we have reached N columns. So for N=5:
Identifiers
789654 321478 963258 741825 917382    
147896

I could write Javascript to parse the table contents each time but is there an easier way?
JSFiddle

A:

A bit more JQuery-fu solves it but there must be a better way!
var x = 0;
var y = 0;

AddThis('012345');
AddThis('678901');
AddThis('123456');
AddThis('789012');
AddThis('345678');
AddThis('901234');

function AddThis(ident)
{       
    if (x === 0 && y === 0)
    {
        $('#wibble tr:last').after(Rowify(GetId()));        
    }
    else
    {    
        if (x === 5)
        {   
            y++;           
            $('#wibble tr:last').after(Rowify(GetId()));
            x = 0;            
        }
    }
    $('#' + GetId()).append(Cellify(ident));
    x++;
}

function GetId()
{
    return 'r' + y;
}

function Rowify(id) {
    return "<tr id='" + id + "'></tr>";
}

function Cellify(data) {
    return '<td>' + data + '</td>';
}

JSFiddle

