Display an optionsBar below an item's row in a list on mouseover event

I have a list of items. I want an optionsBar to be displayed right under the item's row on mouseover event.

To do this, I could perhaps:

1. Create a single options bar and move that bar(change position to the item row on which mouseover event is triggered)

2. I could create a hidden option开发者_如何学编程s bar for each of the item rows and make it visible on mouseover.

I doubt what would be the best way to achieve this!

Using Primefaces datatable & JSF 2.0

Unless the options bar doesn't bloat your DOM to much (few elements in options bar multiplied by few occurrences) than I'd suggest using multiple options bars, as this would probably make your life easier - I'm guessing your options bar is somehow connected to item row, so using corresponding ids would be handy.