Is this SubCart layout possible to do?

Hey, i am making a mock shopping website for college at the moment. I have a subCart in which the selected items are shown in at the bottom of the page. I have the cart fully working, the only thing that is wrong with it is it’s look.

The cart is shown in a seperate row at the bottom of the page, taking up about 25% of the frameset. How the max number of products is 9.

so i was thinking about doing the following layout:

When the first 3 items are selected it’ll display them like this:

Then when the next 3 are added it’ll show:

And finally if all 9 items are added it’ll displayed them like this:

Basically it should have 3 tables displaying three items at max.
Each time an item is added the page is reloaded.
Can this be done? If so any hints or clues on now to do it?

Thanks in advance

Also in #JavaScript _↴