Tengo el siguiente problema: Trabajando con Bootstrap, tengo una web que muestra 12 propiedades en un thumb, cada una con un botón para ver los detalles de la misma, ese botón, abre una ventana MODAL de la propiedad, donde dentro dispongo de información detallada de la propiedad de referencia, los cuales los extraigo desde una tabla con PHP y MYSQL; dentro de la ventana, hay un HEADER, CONTENEDOR y FOOTER. El CONTENEDOR está dividido en dos, a la izquierda una TAB PANEL con 2 pestañas ( DESCRIPCION y +INFO) y a derecha un carousel donde se muestran unas imágenes miniaturas de la propiedad. Dando clic para abrir la MODAL de la 1er. propiedad, me muestra perfecto toda la información de la propiedad, tanto en el TAB CONTENEDOR y +INFO, ahora bien... cuando quiero seleccionar cualquiera de las 11 propiedades restantes, en las pestañas del TAB PANNEL, la izquierda, DESCRIPCION, funciona perfecto, y la derecha +INFO no funciona, directamente no se puede acceder. Adjunto el bloque de codigo y una captura.
<!-- VENTANA MODAL DE LA PROPIEDAD -->
<div class="modal fade" tabindex="-1" role="dialog" id="<?php echo $prop['id']; ?>">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<!-- Titulo de la propiedad -->
<div class="col-md-8">
<h3><?php echo $prop['nombre']; ?></h3>
<p><strong><?php echo ".: Propiedad para " . $prop['plazas'] . " pasajeros :."; ?></strong></p>
</div>
<!-- Fin Titulo de la propiedad -->
<!-- Contactos y Web -->
<div class="col-md-4">
<a href="#">
<span class="hint--bottom-left" data-hint="Llamar por teléfono"><img src="../images/icons/celeste/telefono.png" width="50px"></span>
</a>
<a href="#">
<span class="hint--bottom-left" data-hint="Enviar un Email"><img src="../images/icons/celeste/mail.png" width="50px"></span>
</a>
<a href="#">
<span class="hint--bottom-left" data-hint="Ingresar a la web de la propiedad"><img src="../images/icons/celeste/web.png" width="50px"></span>
</a>
</div>
<!-- Fin Contactos y Web -->
</div>
<!-- Descripción de la propiedad -->
<div class="modal-body">
<div class="col-md-7">
<!-- TAB PANNEL -->
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs" id="myTabs">
<li class="active">
<a href="#tab1primary" data-toggle="tab">DESCRIPCION</a>
</li>
<li>
<a href="#tab2primary" data-toggle="tab">+ INFO</a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1primary">
<p><span>Descripción de la unidad</span><br><br>
<?php echo $prop['descripcion']; ?>
</p><br>
</div>
<div class="tab-pane fade" id="tab2primary">
<p>
<span>Lugar: </span><?php echo " ".$cn_lugar[$prop{'lugar'}]; ?>
</p>
<p>
<span>Dirección: </span><?php echo " ".$prop['ubicacion']; ?>
</p>
<p>
<span>Distancia al mar: </span>
<?php if ($prop['almar'] == 0): ?>
<?php echo " Frente al mar"; ?>
<?php else : ?>
<?php echo $prop['almar'] . " mts."; ?>
<?php endif; ?>
</p>
<p>
<span>Disponibilidad: </span><?php echo " ".$prop['disponibilidad']; ?>
</p>
</div>
</div>
</div>
</div>
<!-- FIN TAB PANNEL -->
<div class="icons clearfix">
<?php require '../componentes/iconos.php'; ?>
</div>
</div>
<div class="col-md-5">
<?php $total_imagenes = 0; ?>
<?php $carpeta = "../images/200x150/" . $prop['id'] . "/"; ?>
<?php $total_imagenes = count(glob(''.$carpeta.'{*.png,*.jpg}', GLOB_BRACE)); ?>
<?php $imagenes = glob(''.$carpeta.'{*.png,*.jpg}', GLOB_BRACE); ?>
<!-- Carousel -->
<div id="carouser-prop" class="carousel slide" data-ride="carousel">
<!-- Indicadores
<ol class="carousel-indicators">
<?php //for ($i=0; $i<$total_imagenes; $i++): ?>
<?php //if ($i == 0): ?>
<li data-target="#carousel-prop" data-slide-to="0" class="active"></li>
<?php //else : ?>
<li data-target="#carousel-prop" data-slide-to="<?php //echo $i; ?>"></li>
<?php //endif; ?>
<?php //endfor; ?>
</ol>
<!--Fin Indicadores -->
<!-- Contenedor del Slider -->
<div class="carousel-inner-mini" role="listbox">
<?php if ($total_imagenes == 0): ?>
<div class="item active">
<img src="../images/BannerProximamente200x150.png"/>
</div>
<?php else : ?>
<?php for ($i=0; $i<$total_imagenes; $i++): ?>
<?php if ($i == 0): ?>
<div class="item active">
<?php else : ?>
<div class="item">
<?php endif; ?>
<?php echo '<img src="' . $imagenes["$i"] . '"/>';?>
</div>
<?php endfor; ?>
<?php endif; ?>
</div>
<!-- Fin Contenedor del Slider -->
<!-- Controles <a class="left carousel-control" href="#carousel-prop" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-prop" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Fin Controles -->
</div>
<!-- Fin carousel -->
</div>
</div>
<!-- Fin descripción de la propiedad -->
<div class="modal-footer-right">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<!-- FIN VENTANA MODAL DE LA PROPIEDAD -->
He confeccionado programado el mismo sistema dentro de la ventana MODAL pero esta vez con paneles tipo ACCORDION y se produce el mismo error, me muestra solo los detalles de la primer propiedad y el resto no funciona, hay alguien que sepa como solucionar esto? Adjunto el código del accordion:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
DESCRIPCION</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<p><span>Descripción de la unidad</span><br><br>
<?php echo $prop['descripcion']; ?>
</p><br>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
+INFO</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>
<span>Lugar: </span><?php echo " ".$cn_lugar[$prop{'lugar'}]; ?>
</p>
<p>
<span>Dirección: </span><?php echo " ".$prop['ubicacion']; ?>
</p>
<p>
<span>Distancia al mar: </span>
<?php if ($prop['almar'] == 0): ?>
<?php echo " Frente al mar"; ?>
<?php else : ?>
<?php echo $prop['almar'] . " mts."; ?>
<?php endif; ?>
</p>
<p>
<span>Disponibilidad: </span><?php echo " ".$prop['disponibilidad']; ?>
</p>
</div>
</div>
</div>
</div>