<div class="container p-4">
    <h1>Multiple Modals on a Page - Bootstrap 4</h1>
    <a href="https://getbootstrap.com/docs/4.3/components/modal/#varying-modal-content">Documentation</a>
  <hr>
<!-- Modal 1 Content   -->
<button 
type="button" 
class="btn btn-secondary" 
data-toggle="modal" 
data-target="#templateModal" 
data-name="name"
data-title="title 1"
data-customer="Chrysler"
data-logo="https://dummyimage.com/400x200/000/fff.png&text=modal+1"
data-industry="industry"
data-products="products"
data-sales cycle="sales cycle"
data-competition="competition"
data-background="background"
data-salesperson="Tony Tiger"
data-jobtitle="jobtitle"
data-headshot="headshot"
data-email="email"
data-metrics="metrics"
data-economicBuyer="economicBuyer"
data-decisionCriteria="decisionCriteria" 
data-decisionProcess="decisionProcess"
data-identifyPain="identifyPain"
data-champion="champion"
>
Modal 1
</button>  
  
  
<!-- Modal 2 Content   -->
<button 
type="button" 
class="btn btn-secondary" 
data-toggle="modal" 
data-target="#templateModal" 
data-name="name"
data-title="title 2"
data-customer="Chrysler"
data-logo="https://dummyimage.com/400x200/000/fff.png&text=modal+2"
data-industry="industry"
data-products="products"
data-sales cycle="sales cycle"
data-competition="competition"
data-background="background"
data-salesperson="Tony Tiger"
data-jobtitle="jobtitle"
data-headshot="headshot"
data-email="email"
data-metrics="metrics"
data-economicBuyer="economicBuyer"
data-decisionCriteria="decisionCriteria" 
data-decisionProcess="decisionProcess"
data-identifyPain="identifyPain"
data-champion="champion"
>
Modal 2
</button>
  
  
  <!-- Modal 3 Content   -->
<button 
type="button" 
class="btn btn-secondary" 
data-toggle="modal" 
data-target="#templateModal" 
data-name="name"
data-title="title 3"
data-customer="Chrysler"
data-logo="https://dummyimage.com/400x200/000/fff.png&text=modal+3"
data-industry="industry"
data-products="products"
data-sales cycle="sales cycle"
data-competition="competition"
data-background="background"
data-salesperson="Tony Tiger"
data-jobtitle="jobtitle"
data-headshot="headshot"
data-email="email"
data-metrics="metrics"
data-economicBuyer="economicBuyer"
data-decisionCriteria="decisionCriteria" 
data-decisionProcess="decisionProcess"
data-identifyPain="identifyPain"
data-champion="champion"
>
Modal 3
</button> 
  
  
  
<!--  Modal template  -->
          <div class="modal fade modal-wide" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModal">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
        
              <div class="modal-body">
                  <span type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></span>
        
                <img alt="logo" class="modal-logo"> 
                <h2 class="modal-title"></h2>
                <p class="modal-name"></p>
                <p class="modal-customer"></p>
                <p class="modal-logo"></p>
                <p class="modal-industry"></p>
                <p class="modal-products"></p>
                <p class="modal-sales cycle"></p>
                <p class="modal-competition"></p>
                <p class="modal-background"></p>
                <p class="modal-salesperson"></p>
                <p class="modal-jobtitle"></p>
                <p class="modal-headshot"></p>
                <p class="modal-email"></p>
                <p class="modal-support"></p>
                <p class="modal-metrics"></p>
                <p class="modal-economicBuyer"></p>
                <p class="modal-decisionCriteria"></p> 
                <p class="modal-decisionProcess"></p>
                <p class="modal-identifyPain"></p>
                <p class="modal-champion"></p>
        
              </div>
            </div>
          </div>
        </div>
        <!-- /.modal -->
  
  
</div>
<!-- /.container -->
$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready

  $("button").each(function(index) {
    var logo = $(this).data("logo");
    $(this)
      .find(".button-logo")
      .attr("src", $(this).data("logo"));
  });

  $("#templateModal").on("show.bs.modal", function(event) {
    var button = $(event.relatedTarget);
    var modal = $(this);
    modal.find(".modal-title").text(button.data("title"));
    modal.find(".modal-title").text(button.data("title"));
    modal.find(".modal-customer").text(button.data("customer"));

    modal.find(".modal-logo").attr("src", button.data("logo"));
    modal.find(".modal-industry").text(button.data("industry"));
    modal.find(".modal-products").text(button.data("products"));
    modal.find(".modal-salesCycle").text(button.data("salesCycle"));
    modal.find(".modal-competition").text(button.data("competition"));
    modal.find(".modal-background").text(button.data("background"));
    modal.find(".modal-salesperson").text(button.data("salesperson"));
    modal.find(".modal-jobTitle").text(button.data("jobtitle"));
    modal.find(".modal-headshot").text(button.data("headshot"));
    modal.find(".modal-email").text(button.data("email"));
    modal.find(".modal-support").text(button.data("support"));
    modal.find(".modal-metrics").text(button.data("metrics"));
    modal.find(".modal-economicBuyer").text(button.data("economicBuyer"));
    modal.find(".modal-decisionCriteria").text(button.data("decisionCriteria"));
    modal.find(".modal-decisionProcess").text(button.data("decisionProcess"));
    modal.find(".modal-identifyPain").text(button.data("identifyPain"));
    modal.find(".modal-champion").text(button.data("champion"));
  });


  

  

  // document ready
});

External CSS

  1. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.js