Multiple modals

I'm trying to add multiple modal windows to my page, but don't manage very well at it. Currently I'm using code below and I would need to modify it to be usable with multiple modals as well.

HTML:

<div class="modal">
<div class="overlay"></div>
  <div class="modal--contents modal--transition">
    <a class="modal--close" href="#"><img src="/images/icons/modal/close.png">Close</a>
    <h2>How to install on Windows</h2>
    <div class="instructions">
        <div class="instructions-single">
            <img src="/images/placeholders/step.png" alt="Step 1">
            <h3>Step 1</h3>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        <div class="instructions-single">
            <img src="/images/placeholders/step.png" alt="Step 2">
            <h3>Step 2</h3>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        <div class="instructions-single">
            <img src="/images/placeholders/step.png" alt="Step 3">
            <h3>Step 3</h3>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
    </div>
  </div>
</div>

<a href="javascript:void(0)" class="overlay--trigger btn"><img src="/images/icons/download/help_icon.png" alt="Help">How to install</a>

JS:

var modal = $('.modal');

$( ".btn" ).on( "click", function() {
  $( modal ).toggleClass('modal--show');
});

$( ".overlay" ).on( "click", function() {
  $( modal ).toggleClass('modal--show');
});

$( ".modal--close" ).on( "click", function() {
  $( modal ).toggleClass('modal--show');
});