Multiple Photo Sphere Viewers

by mtran21

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css">
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="#" class="thumb" id="thumb131155"><img src="https://placehold.co/200x150" alt=""></a>
        <div class="caption">
          <h3>ASB 101</h3>

          <p><strong>Capacity: 48</strong></p>
        </div>
      </div>

      <!-- Modal:131155 -->
      <div class="modal fade" id="131155" tabindex="-1" role="dialog" aria-labelledby="131155" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" id="close131155">&times;</button>
              <h4 class="modal-title" id="myModalLabel">ASB 101</h4>
            </div>
            <div class="modal-body">
              <div class="panorama-margin" id="photosphere131155" style="width: 100%; height: 50vh;"></div>
            </div>
            <div class="modal-footer">
              <div class="row">
                <div class="col-md-4 room-info">
                  <div class="info-cell">
                    <p class="large">Capacity: 48</p>
                  </div>
                </div>
                <div class="col-md-4 room-info">
                  <a class="btn btn-default btn-wide" href="#?ID=151168">Classroom Technology</a>
                </div>
                <div class="col-md-4 room-info"><a href="#"...