jquery - Hide Element with Bootstrap Yet Maintain Unique ID -

jquery - Hide Element with Bootstrap Yet Maintain Unique ID -

i have simple need--i want responsively render div later need manipulate using javascript. consider code:

<div id="test" class="visible-lg-block visible-md-block visible-sm-block>large viewport</div> <div id="test" class="visible-xs-block">small viewport</div>

please note: illustration text in div above not actual case. actual case includes jquery ui command within each div, this:

<div id="test" class="visible-lg-block visible-md-block visible-sm-block>[[jquery control]]</div> <div id="test" class="visible-xs-block">[[jquery control]]</div>

i utilize jquery set properties on jquery command , properties must different when viewport "xs" versus when it's "sm", "md", or "lg".

this works well: when show browser @ 1024x768, see "large viewport"; when cut down browser 640x960, see "small viewport". problem both tags appear on rendered dom , both have id attribute value of "test". utilize unique id in javascript find div tag--and javascript sees 2 of them.

how can address problem--either having unique id each div or somehow getting "hidden" div not render @ all? ideally, i'd solution uses bootstrap features (which i'm relatively new to) , not solution requires javascript or jquery.

if must utilize js/jquery, best way determine if tag rendered bootstrap? don't want utilize media queries or seek determine viewport size on own want bootstrap have "decision-making authority" whether div gets rendered or not--i want know bootstrap decided , interact visible div needed.

thank you.

thanks clarification.

the simplest solution may utilize class instead of id, or give them distinct ids, , apply javascript both though 1 of them invisible.

if not possible, due jquery ui controller doing shouldn't done hidden div, consider giving them both same class (e.g. mytestclass) , selecting visible 1 using:

$('.mytestclass:visible')

as selector. select 1 currently has width or height in layout, 1 hidden bootstrap not (due display: none; bootstrap gives it).

but don't forget if viewport width later changes (browser resize, mobile rotate, whatever) may need hear event , reapply code newly visible div.

does sound work scenario?

jquery twitter-bootstrap css3 dom visibility