Re-use dropdown menu across multiple Table rows

I have a table of transactions, and I would like to add a small button to each row. When clicked, a small drop down should appear with two menu items, something like this:

<!-- language: lang-html -->

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
    <li><a tabindex="-1" href="#">Pay</a></li>
    <li><a tabindex="-1" href="#">Delete</a></li>
</ul>

However, my table can have between zero and potentially hundreds of rows, so repeating the code, PLUS the button that has to create the drop down, would be a lot of page size addition.

Is there a way to have that code once, and somehow, from the button click, use the same code from each row? Additionally, I would need to change the href value for each row, based on the ID of that row. So the href would actually be something like:

<!-- language: lang-none -->

\transaction\pay?id=10

With the ID changing for each row.

Add a button to your rows like this:

<!-- language: lang-html -->

<td class="dropdown">
    <a class="btn btn-default actionButton" data-toggle="dropdown" href="#">
        Action
    </a>
</td>

Dropdown will only automatically position itself when it is right after the data-toggle that's opening it. To avoid having to write a lot of positioning code, you can just move the dropdown menu before you open it:

<!-- language: lang-js -->

//save the selector so you don't have to do the lookup everytime
$dropdown = $("#contextMenu");

$(".actionButton").click(function() {
    //get row ID
    var id = $(this).closest("tr").children().first().html();

    //move dropdown menu
    $(this).after($dropdown);

    //update links
    $dropdown.find(".payLink").attr("href", "/transaction/pay?id="+id);
    $dropdown.find(".delLink").attr("href", "/transaction/delete?id="+id);

    //show dropdown
    $(this).dropdown();
});

Demo in jsFiddle