Single button use to create light box that brings up different content based on the div

Question

My goal is: when you click on the button "word" it will turn into a lightbox. The button will bring up another content box that holds the same profile image as before with a small bio with image thumbnails below on what they worked on.

I was able to get everything working for the first button, but I found that if I keep doing it this way, I will have to rewrite the code over and over for each profile. Is there a way I could rewrite my code so once you click on the button the correct content will come up based on the div that you are in?

/************************************
			ARTIST PAGE
************************************/

/*profile*/

.profile img {
  height: 300px;
  width: 400px;
  margin-top: 15%;
}
.artistHeader {
  /*color: black;*/
  margin-top: 7%;
}
.longName {
  font-size: 20px;
}
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://lokeshdhakar.com/projects/lightbox/overlay.png) repeat;
  text-align: center;
}
#lightbox img {
  box-shadow: 0 0 25px #111;
  -webkit-box-shadow: 0 0 25px #111;
  -moz-box-shadow: 0 0 25px #111;
  max-width: 940px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<?php defined( 'BASEPATH') OR exit( 'No direct script access allowed'); ?>



<div class="container">
  <div class=" artistHeader page-header">
    <h1>Meet the artist</h1>
  </div>
</div>


<!-- PROFILE -->
<!-- <div class="profile"> -->
<div class="panel panel-default profile">
  <div class="panel-body">



    <div class="container ">
      <div class="row">

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="https://c1.staticflickr.com/7/6048/6324416396_5f48f83e7f_b.jpg" alt="Valerie Head Shot" class="img-rounded"></img>
            <div class="caption">
              <h3>Prof. Yreina D. Cervantez</h3>
              <p><a href="javascript:void(0);" class="btn btn-primary" role="button" id="cervantez">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>



        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="Valerie Head Shot" class="img-rounded"></img>
            <div class="caption">
              <h3>Prof. Ken Jones</h3>
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>


        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="Valerie Head Shot" class="img-rounded"></img>
            <div class="caption">
              <h3>Sandy Hernandez Martinez</h3>
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>


        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="img/val.jpg" alt="Valerie Head Shot" class="img-rounded"></img>
            <div class="caption">
              <h3>Valerie Sharp</h3>
              <!-- <p>Physhology major with a minor in art. Educational goals are to become an art therpest.</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>
        <!-- </div> -->
        <!-- </div> -->


        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="../../img/muralp3.png" alt="..." class="img-rounded"></img>
            <div class="caption">
              <h3>Omar Cruz</h3>
              <!-- <p>...</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>
        <!-- </div> -->
        <!-- <div class="container"> -->
        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="../../img/muralp4.jpg" alt="..."></img>
            <div class="caption">
              <h3>Martha Martinez</h3>
              <!-- <p>...</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>
        <!-- </div> -->

        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://upload.wikimedia.org/wikipedia/commons/4/4c/TRIO_Upward_Bound.jpg" alt="..."></img>
            <div class="caption">
              <h3>Cynthia Menjivar</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>


        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://static.messynessychic.com/wp-content/uploads/2014/09/bettiebangs.jpg" alt="..."></img>
            <div class="caption">
              <h3>Yecenia Gutierrez</h3>
              <!-- <p>.1..</p> -->
              <p><a id="yecenia" href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWB1jOjF6DfTXhbSJNDK7wMGeTmIBQGGQFkQBe-UONprXEB3jl" alt="..."></img>
            <div class="caption">
              <h3>Myisha Arellanus </h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.clipartsegifs.com.br/cliparts/cartoon/dexter/dexter_001.gif" alt="..."></img>
            <div class="caption">
              <h3>Jessica </h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>


        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="https://s-media-cache-ak0.pinimg.com/736x/fb/76/86/fb76861d4f17ebdae455576fb0718c57.jpg" alt="..."></img>
            <div class="caption">
              <h3>Mario</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.harleysvillebooks.com/files/harleysville/madeline.jpg" alt="..."></img>
            <div class="caption">
              <h3>Christine Cucchiaro</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>


        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://static.timetobreak.com/wp-content/uploads/2015/03/tl-logo-new.jpg" alt="..."></img>
            <div class="caption">
              <h3>Sandra</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://vignette2.wikia.nocookie.net/sailormoonenglishanime/images/3/33/Sailor_Mars_(Fireball_Charge).png/revision/latest?cb=20140301040024" alt="..."></img>
            <div class="caption">
              <h3>Carolina Alcala</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Raymundo M. Hernandez-Lopez</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <!--       <div class="col-md-4">
    <div class="thumbnail">
      <img class='img-responsive' src="http://vignette2.wikia.nocookie.net/sailormoonenglishanime/images/3/33/Sailor_Mars_(Fireball_Charge).png/revision/latest?cb=20140301040024" alt="..."></img>
      <div class="caption">
        <h3>Prof. Ken Jones</h3>
        <! <p>.1..</p>
        <p><a href="#overlay" class="btn btn-primary" role="button">Words</a> <a href="#overlay" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div> -->

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Juan M. Nieto Lopez</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3 class="longName">Mei Wah Lois Koa Morimoto</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Antonio Velis</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Raudel de La Riva</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Gia De La Riva</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Monica Valenzuela</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Toney Valle</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>



      </div>
    </div>
  </div>
</div>
</div>
</div>

<script>
  $(document).ready(function() {
    $('#cervantez').click(function() {
      $.colorbox({
        href: "/artists/cervantez",
        opacity: 0.5
      });
    });

    $('#yecenia').click(function() {
      $.colorbox({
        href: "/artists/yecenia",
        opacity: 0.5
      });
    });
  });
</script>

Answer 1

1. Remove the id's from your buttons and move relevant data to attributes. (Personal preference, but reflected later)

   <div class="col-md-4">
     <div class="thumbnail">
       <img class='img-responsive' src="https://c1.staticflickr.com/7/6048/6324416396_5f48f83e7f_b.jpg" alt="Valerie Head Shot" class="img-rounded"></img>
       <div class="caption">
         <h3>Prof. Yreina D. Cervantez</h3>
         <p><a href="javascript:void(0);" class="btn btn-primary" role="button" data-artist="cervantez">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
         </p>
       </div>
     </div>
   </div>
   

2. Apply to all relevant buttons by class (might want new class instead of using btn-primary as I have done)

3. fetch artist-specific data from attribute

   <script>
     $(document).ready(function() {
       $('.btn-primary').click(function() {
         $.colorbox({
           href: "/artists/"+$(this).attr("data-artist"),
           opacity: 0.5
         });
       });
     });
   </script>