Bootstrap: Same ID Models inside and outstide of Carousel Display Issue - php

Question

I could paste all my code here but thought it may not help so I tried to paste the important stuff. I hope I am asking the questions appropriately so please feel free to guide me. I will explain the logic below and show what is not working.
In Bootstrap, I have a carousel where models are dynamically created in the following manner.
i. Begin Carousel
<div class="hero-unit" style="padding-right:30px; padding-left:30px; padding-top:30px; padding-bottom: 50px;">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
</div>
</div>
</div>
ii. Dynamically create href links to models
<div class="hero-unit" style="padding-right:30px; padding-left:30px; padding-top:30px; padding-bottom: 50px;">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<?php $carouselClass = "active item";
while($r = mysql_fetch_assoc($events))
{
?>
<div class="<?php echo $carouselClass; ?>">
<?php $carouselClass = "item"; ?>
// Here, we create model dynamically
<a role="button" data-toggle="modal" href="#myModel<?php echo $r['_id']; ?>" ><?php echo $r['_name'] ; ?></a>
</div>
</div>
</div>
iii. Use partials in PHP to improve Don't Repeat Yourself (DRY) operations
<div class="hero-unit" style="padding-right:30px; padding-left:30px; padding-top:30px; padding-bottom: 50px;">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<?php $carouselClass = "active item";
while($r = mysql_fetch_assoc($events))
{
?>
<div class="<?php echo $carouselClass; ?>">
<?php $carouselClass = "item"; ?>
// Here, we create model dynamically
<a role="button" data-toggle="modal" href="#myModel<?php echo $r['_id']; ?>" ><?php echo $r['_name'] ; ?></a>
<?php require '_actualModel.php'; ?>
</div>
</div>
</div>
iv. _actualModel.php
<div id="myModel<?php echo $r['_id']; ?>" class="modal hide fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<?php echo $r['_body'];
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div> </div>
Now, this works very well because the carousel cycles the content and the models pop up. However, suppose on the same page I would like to make a model with the same id but outside the carousel. I would go about doing it this way.
// Here, we create model which would have the same id as one of them in the carousel
<a role="button" data-toggle="modal" href="#myModel<?php echo $r['_id']; ?>" ><?php echo $r['_name'] ; ?></a>
<?php require '_actualModel.php'; ?>
The problem is the model (with the same id) created outside the carousel will only pop up if the model within the carousel (with the same id) is active at that point in time; that is, it is in display. If it is not active or within display, then the background will grey out, but the pop up model will not come into view.![Here is what happens when the model with the same id outside the carousel is click while the model with the same id inside is not in display - Can't upload picture yet :) ][3]
May I state that my reason for having models with the same ID is because they have the exact same information and so I am trying to implementing DRY practices. Sorry about the indentation.

Answer 1

Figured out a possible solution. Like #Carsten said, it is not right to have elements of the same ID. But here is a solution to somebody who lingers on the same problem; that is trying to make dynamic modals from inside and outside a carousel where some modals may have the same id if using the above approach (in question).
The trick is to give the carousel modals a unique identifier and the same goes for outside the carousel.
Thus, before I begin my carousel, I can assign:
$identifier = "carousel";
and then I append $identifier to the href. That is:
<a role="button" data-toggle="modal" href="#myModel<?php echo $identifier . $r['_id']; ?>" ><?php echo $r['_name'] ; ?></a>
and of course the modal would have
<div id="myModel<?php echo $identifier . $r['_id']; ?>" class="modal hide fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
So, to dynamically create a similar modal outside, I would make $identifier = "outside" and use the same methods to create the href and modal.
Hope this helps someone.