Модальное отображение одинаковой информации для всех ссылок

Я только что создал свой первый модал с помощью кода bootstrap, у меня есть вся информация, которую я хочу отобразить, но ссылка "читать дальше" всегда указывает на первый модал. Я понимаю, что мне придется установить каждый модал, чтобы иметь свой собственный уникальный идентификатор, я думаю, но я просто не уверен, как это сделать. Я не знаком с javascript, в который, наверное, мне придется войти, чтобы заставить это работать должным образом.

Будьте действительно благодарны за любой совет

Много Спасибо

Https://jsfiddle.net/rufusbear/f6xkk4ch/

    <div class="one-fourth">
        <div class="image-bg">
          <img src="img/Tracey.jpg" alt="Tracey Riddington" />
          <h5>Tracey Riddington<br>Manager</h5>
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Read More</button>
          <!-- Modal -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">Tracey Riddington - Manager</h4>
                </div>
                <div class="modal-body">
                  <img class="modal-img" src="img/Tracey.jpg" alt="Tracey Riddington" />
                  <p>Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member).<br><br>Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member). Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member).<br><br>Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member).Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.<br><br>Qualified CPSA Coach (Life Member) APSI (Fellow Member).</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="one-fourth">
        <div class="image-bg">
          <img src="img/KevinLock.jpeg" alt="Kevin Lock" />
          <h5>Kevin Lock<br>Grounds Manager</h5>
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Read More</button>
          <!-- Modal -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">Kevin Lock - Grounds Manager</h4>
                </div>
                <div class="modal-body">
                  <img class="modal-img" src="img/KevinLock.jpeg" alt="Kevin Lock" />
                  <p>...</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    /*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=99797a3288748184e66844825ee3172f)
 * Config saved to config.json and https://gist.github.com/99797a3288748184e66844825ee3172f
 */


/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */


   .one-fourth {
  width: 23%;
  float: left;
  text-align: center;
  margin: 2% 0% 1% 2.5%;
}

.image-bg {
  background: #e9e8e6;
  padding: 10px 0;
  width: 95%;
}

hr {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0
}

button {
  overflow: visible
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto
}

[role="button"] {
  cursor: pointer
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none;
}

.btn-primary {
  color: #fff;
  background-color: #718373;
}

.btn-primary .badge {
  color: #718373;
  background-color: #fff
}

.btn-lg {
  padding: 5px 15px;
  line-height: 1.3333333;
  border-radius: 3px
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px
}

.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px
}

.btn-block {
  display: block;
  width: 100%
}

.btn-block+.btn-block {
  margin-top: 5px
}

.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear
}

.fade.in {
  opacity: 1
}

.collapse {
  display: none
}

.collapse.in {
  display: block
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  -o-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: .35s;
  -o-transition-duration: .35s;
  transition-duration: .35s;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease
}

.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  filter: alpha(opacity=20)
}

button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none
}

.modal-open {
  overflow: hidden
}

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0)
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px
}

.modal-content {
  position: relative;
  background-color: #718373;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
  color: #fff;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000
}

.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0)
}

.modal-backdrop.in {
  opacity: .5;
  filter: alpha(opacity=50)
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5
}

.modal-header .close {
  margin-top: -2px
}

.modal-title {
  margin: 0;
  line-height: 1.42857143
}

.modal-body {
  position: relative;
  padding: 15px
}

.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5
}

.modal-footer .btn+.btn {
  margin-left: 5px;
  margin-bottom: 0
}

.modal-footer .btn-group .btn+.btn {
  margin-left: -1px
}

.modal-footer .btn-block+.btn-block {
  margin-left: 0
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll
}

@media (min-width:768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5)
  }
  .modal-sm {
    width: 300px
  }
}

@media (min-width:992px) {
  .modal-lg {
    width: 900px
  }
}

.clearfix:before,
.clearfix:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  content: " ";
  display: table
}

.clearfix:after,
.modal-header:after,
.modal-footer:after {
  clear: both
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto
}

.pull-right {
  float: right !important
}

.pull-left {
  float: left !important
}

.hide {
  display: none !important
}

.show {
  display: block !important
}

.invisible {
  visibility: hidden
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0
}

.hidden {
  display: none !important
}

.affix {
  position: fixed
}