En el siguiente ejemplo al hacer click en el boton con id (myBtn) me abre perfecto un modal y su contenido.

Mi pregunta: Que debo modificar y/o agregar para poder tener varios botones y me abra el contenidos en diferentes modales. Espero que se entienda. Muchas gracias.

**HTML**

    <button id='myBtn' class='datos'>informacion</button>
    <div id='myModal' class='modal'>
    <div class='modal-content'>
    <span class='close'>&times;</span>
    <p><b>Titulo 1</b>
    </div>
    </div>


**javascript**


    var modal = document.getElementById('myModal');
    
    var btn = document.getElementById('myBtn');
    
    var span = document.getElementsByClassName('close')[0];
    
    btn.onclick = function() {
    modal.style.display = 'block';
    }
    
    span.onclick = function() {
    modal.style.display = 'none';
    }
    
    window.onclick = function(event) {
    if (event.target == modal) {
    modal.style.display = 'none';
    }
    }


**css**

    .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }
        
    /* Modal Content */ .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; }
        
    /* The Close Button */ .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold; }
        
    .close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer; }