Hello.
На странице есть множество таб с одинаковыми элементами/блоками html'a
есть dropdown менюшка сделанная на js.
одинаковые блоки html менюшки расположены в разных табах.
Проблема: менюшка срабатывает только на первом блоке, который встречается в HTML, в остальных игнор(без ошибок).

HTML:

1 ТАБ

<div class="tab-pane" id="create-attachments-subtab">
	<div class="form_buttons">
		<button class="hide-in-confirm"><i class="fa fa-plus left-icon"></i> Add</button>
		<button class="hide-in-confirm"><i class="fa fa-times left-icon"></i> Delete</button>
		<div id="print_wrapper">
			<button type="button" class="" id="btnAction">
				<i class="fa fa-ellipsis-v"></i> Action
			</button>
			<div class='btn-submenu' id='printSubmenu'>
				<ul >
				   <li><a href="#" class="btnConfirm" customkey="c">Confirm</a></li>
				   <li><a href="#" class="btnUnconfirm" customkey="u">Unconfirm</a></li>
				   <li><a href="#" class="btnReject" customkey="r">Reject</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

--------
2 ТАБ:

<div class="tab-pane" id="create-notes-subtab">
	<div class="form_buttons">
		<button class="create-btn hide-in-confirm"><i class="fa fa-plus left-icon"></i> Add</button>
		<button class="edit-btn hide-in-confirm"><i class="fa fa-pencil left-icon"></i> Edit</button>
		<button class="delete-btn hide-in-confirm"><i class="fa fa-times left-icon"></i> Delete</button>
		<div id="print_wrapper">
			<button type="button" class="" id="btnAction">
				<i class="fa fa-ellipsis-v"></i> Action
			</button>
			<div class='btn-submenu' id='printSubmenu'>
				<ul >
				   <li><a href="#" class="btnConfirm" customkey="c">Confirm</a></li>
				   <li><a href="#" class="btnUnconfirm" customkey="u">Unconfirm</a></li>
				   <li><a href="#" class="btnReject" customkey="r">Reject</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

JS:

	function initPrintDropDown(button, submenu) {
		var btnPrintEl = $(button);
		console.log("btn: "+btnPrintEl);
		var menu = $(submenu);
		console.log("submenu: "+ menu);
		$(btnPrintEl).mouseenter( function(e){
			e.preventDefault();
			var pos = btnPrintEl.position();
			menu.css("left", pos.left );
			menu.css("top", (pos.top + btnPrintEl.height()  + "px"));
			menu.css("width", (btnPrintEl.width()+40) + "px");
			menu.slideDown(500);
		} );
		$("a", menu).click(function(){
			menu.stop(true, true);
			menu.slideUp(500);
		});
		$('#print_wrapper').mouseleave(function(){
			menu.stop(true, true);
			menu.slideUp(500);
		});
	}

вызов:

initPrintDropDown("#btnAction", "#printSubmenu");

как это решается, когда одинаковые имена идентификаторов ?