How do I add a 2nd modal to my html page
<p>I didn't explain my problem in my last post.</p>

<p>So I want to add a second modal to my html page so if you click on "Button 1" it would open "Modal 1" and if you click "button 2" it will open "Modal 2" however "button 3" "button 4" "button 5" and "button 6" to open "modal 2". When i created the second modal and set the javascript below. It will keep opening Modal 2 on both buttons and not modal 1 on button 1. </p>

<p><strong>Also note, the ID of the first button "free"</strong></p>

<p><strong>Also note, the ID of the second button "oneday"</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
// Get the modal1
var modal = document.getElementById('myModal1');

// Get the button that opens the modal
var btn = document.getElementById("free");

// Get the &lt;span&gt; element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on &lt;span&gt; (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
&lt;/script&gt;
&lt;script&gt;
// Get the modal2
var modal = document.getElementById('myModal2');

// Get the button that opens the modal
var btn = document.getElementById("oneday");

// Get the &lt;span&gt; element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on &lt;span&gt; (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>Both buttons keep opening "Modal2" when the button 1 is set for "Modal1"
HTML Below</p>

<p><strong>Button 1</strong>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- service item --&gt;
&lt;div class="col-md-4 wow fadeInLeft" data-wow-duration="500ms"&gt;
  &lt;div class="service-item"&gt;
    &lt;div class="service-icon"&gt;
      &lt;i class="fa fa-snowflake-o  fa-2x"&gt;&lt;/i&gt;
    &lt;/div&gt;

    &lt;div class="service-desc"&gt;
      &lt;button id="free"&gt;
        &lt;h3&gt;5 Day Free Trial&lt;/h3&gt; 
      &lt;/button&gt;
      &lt;b&gt;&lt;p&gt;So you can get a taste of the action for free, we will give new users a 5 day trial to see how they like our bot before they buy!&lt;/p&gt; &lt;/b&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;!-- end service item --&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Button 2</strong></p>

<pre><code>&lt;!-- service item --&gt;
&lt;div class="col-md-4 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="500ms"&gt;
  &lt;div class="service-item"&gt;
    &lt;div class="service-icon"&gt;
      &lt;i class="fa fa-clock-o fa-2x"&gt;&lt;/i&gt;
    &lt;/div&gt;

    &lt;div class="service-desc"&gt;
      &lt;button id="oneday"&gt;
        &lt;h3&gt;1 Day&lt;/h3&gt; 
      &lt;/button&gt;
      &lt;b&gt;&lt;p&gt;$0.74  &amp;nbsp;&amp;nbsp;-24 Hours &lt;/p&gt; &lt;/b&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;!-- end service item --&gt;
</code></pre>

<p><strong><em>And the Modals are here</em></strong></p>

<p><strong>Modal1</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Modal1 --&gt;
&lt;div id="myModal1" class="modal"&gt;

  &lt;!-- Modal content --&gt;
  &lt;div class="modal-content"&gt;

    &lt;form name="getinfo" onsubmit="return validateForm()" action="php/gmail.php" method="POST"&gt;
      &lt;div class="form-style-8"&gt;
        &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
        &lt;label for="msg"&gt;E-mail:&lt;/label&gt;
        &lt;input type="email" id="mail" name="email" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label for="msg"&gt;Username:&lt;/label&gt;
        &lt;br&gt;
        &lt;input id="user" name="username"&gt;
        &lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label for="msg"&gt;Password:&lt;/label&gt;
        &lt;br&gt;
        &lt;input type="password" id="pass" name="password"&gt;
        &lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label for="msg"&gt;Confirm Password:&lt;/label&gt;
        &lt;br&gt;
        &lt;input type="password" id="pass" name="cpassword"&gt;
        &lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label for="msg"&gt;3 Hashtags:&lt;/label&gt;
        &lt;br&gt;
        &lt;input id="tags" name="hashtags"&gt;
        &lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;input id="submit" type="submit" name="submit" value="submit"&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Modal2</strong>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Modal2 content --&gt;
&lt;div class="modal-content"&gt;

  &lt;form name="getinfo2" onsubmit="return validateForm()" action="php/gmail.php" method="POST"&gt;
    &lt;div class="form-style-8"&gt;
      &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
      &lt;label for="msg"&gt;Example:&lt;/label&gt;
      &lt;input type="email" id="e1" name="email" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="msg"&gt;Example2:&lt;/label&gt;
      &lt;br&gt;
      &lt;input id="e2" name="username"&gt;
      &lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="msg"&gt;Example3:&lt;/label&gt;
      &lt;br&gt;
      &lt;input type="password" id="e3" name="password"&gt;
      &lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="msg"&gt;Example4:&lt;/label&gt;
      &lt;br&gt;
      &lt;input type="password" id="e4" name="cpassword"&gt;
      &lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="msg"&gt;Example5:&lt;/label&gt;
      &lt;br&gt;
      &lt;input id="e5" name="hashtags"&gt;
      &lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input id="submit" type="submit" name="submit" value="submit"&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>So i'm asking how do I get modal1 to work only with button1 and modal2 to work with buttons 2,3,4,5 and 6 that i will create later.</p>