How can I share the dropdown menu definition accross multiple buttons - twitter-bootstrap-3

Question

Each line in my table have a dropdown menu that show "Edit, Delete". If i have 100 lines in my table, i have 100 identical dropdown menus definition.
If is possible to define only one dropdown menu and use it for all my dropdown buttons? It seems to work but the dropdown menu is not shown at the right place. Is there a way to tell the dropdown menu to change his position to another one?
<a data-toggle="dropdown" href="#unique-dropdown">Button1</a>
<a data-toggle="dropdown" href="#unique-dropdown">Button2</a>
<div class="dropdown" id="unique-dropdown">
<ul class="dropdown-menu">
<li><i class="fa fa-pencil fa-fw"></i> Edit</li>
<li><i class="fa fa-trash-o fa-fw"></i> Delete</li>
</ul>
</div>

Answer 1

actually, you were really close to get what you wanted...
look this sample: http://jsfiddle.net/1jfe3wju/2/
html:
<a class="uniquedd" data-toggle="dropdown" aria-expanded="false" data-info="idofwhatyouwanttoeditordelete" href="#unique-dropdown">Button1</a>
<a class="uniquedd" data-toggle="dropdown" aria-expanded="false" data-info="otheridofwhatyouwanttoeditordelete" href="#unique-dropdown">Button2</a>
<div class="dropdown" id="unique-dropdown">
<ul class="dropdown-menu">
<li><i class="fa fa-pencil fa-fw"></i> Edit</li>
<li><i class="fa fa-trash-o fa-fw"></i> Delete</li>
</ul>
</div>
js:
$('.uniquedd').click(function(e) {
e.preventDefault();
var that = $(this);
var p = that.offset();
actOverWhat = that.data('info');
//change the actions of the buttons edit and delete
//check if open
isOpen = $("#unique-dropdown").hasClass('open');
if( isOpen ) {
that.dropdown('toggle');
}
$("#unique-dropdown").offset({ top: (p.top + 15), left: p.left });
});
offset is document related, so probably if the page is large won't help, but you have jquery .position();

Answer 2

You could use less js code. All you need to do is "Append" your class="dropdown-menu" to the class="dropdown" div each time you click an element that should show the menu.
Look at this example: https://jsfiddle.net/espriella/b4mztvnz/
$CHdropdown = $('#ColumnHeaderDropdownId');
$('.sharingdropdown').click(function(e) {
$(this).append($CHdropdown);
});
And this is the HTML sample:
<table class="table table-striped table-bordered" id="ChartContentGridId">
<thead>
<tr>
<th>
<div contenteditable style="float:left">Series 1</div>
<div class="dropdown sharingdropdown" style="float:right">
<button class="btn btn-xs btn-success dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
</div>
</th>
<th>
<div contenteditable style="float:left">Series 2</div>
<div class="dropdown sharingdropdown" style="float:right">
<button class="btn btn-xs btn-success dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
</div>
</th>
<th width="20px"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<ul class="dropdown-menu pull-right" id="ColumnHeaderDropdownId">
<li><i class="fa fa-pencil"></i> Edit</li>
<li><i class="fa fa-times"></i> Delete</li>
</ul>