Button for the 2nd Bootstrap modal does not function (not clickable)

Question

I have 2 bootstrap models on the same page, the first modal opens and runs as expected. After saving the form data in the first modal, a button is visible to open up the second modal. The button however is not clickable:

<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>

I've found a few that have had similar problems with two modals on the same page but there appears to be no common causes. How can I fix this? Preferably I would like the button to work. Iif for whatever reason it's not possible, I'm ok with JS automatically opening the second modal after the 1st one closes. I have also been unsuccessful with getting that to work. I've triple checked that all my tags are closed and correctly spaced. I've omitted a lot of the form content within the modals in the code below for purposes of brevity. I've also included my JS at the end of the page that directs the visibility of the modals.

    <div class="add_left"> 
      <div id="crop-avatar" class="container">
        <div class="bigpicture"> <img src="" > </div>
        <div class="avatar-view" title="Add new listing"> <img src="../0images/cropy.jpg" alt="Listing Image" width="400px"</div>
    <!-- modal 1 -->
        <div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <form name="avatar-form" class="avatar-form" method="post" action="crop-avatar.php" enctype="multipart/form-data">
                <div class="modal-header"> </div>
                <div class="modal-body">
                  <div class="avatar-body">
                    <div class="row"> </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
                  <button id="nxtbutt" class="btn btn-primary avatar-save" disabled type="submit">Save Image</button>
                </div>
              </form>
              <div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="add_right">
      <h4 class="instructiondata" style="padding-top:20px">Click the button below to add your pdf file and data:</h4>
      <button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
    <!-- modal 2 -->
      <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
          <div class="modal-content">
            <form name="data-form" class="data-form" method="post" action="add_data.php" enctype="multipart/form-data">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel"></h4>
              </div>
              <div class="modal-body">
                <h2>Listing Designation</h2>
                <fieldset style="padding-left:5px;">
                  <legend> Designation </legend>
                </fieldset>
              </div>
              <div class="modal-footer">
                <input class="avatar-src" name="avatar_src" type="hidden">
                <input type="hidden" name="id" value="">
                <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
                <button id="nxtbutttwo" class="btn btn-primary avatar-save" type="submit">Save Listing</button>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
          </div>
        </div>
      </div>
    </div>
    <script Content-Type: application/javascript src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script>
    $("#avatarInput").on("change", function() {
        $("#nxtbutt").prop('disabled', !$(this).val()); 
    }); 
        $(document).ready(function(){
            $(".add_right").hide();
            $(".add_display").hide();
            $(".bigpicture").hide();
            $(".instructiondata").hide();
        });
            $( "#nxtbutt" ).click(function () {
                $(".add_right").show();
                $(".bigpicture").show();
                $(".add_display").hide();
                $(".avatar-view").hide();
                $(".instruction").hide();
                $(".instructiondata").show(); 
            });
                $( "#nxtbutttwo" ).click(function () {
                    $(".add_right").show();
                    $(".add_display").show();
                });
    </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 

Thank you in advance!

Answer 1

Don't use show() and hide() here. You can close and open using the modal method:

$("#secondModalButton").click(function() {
    $("#firstModal").modal('hide');
    $("#secondModal").modal('show');
});

Or (I just noticed) you can do it purely with bootstrap attributes:

<button type="button" class="btn btn-primary" id="secondModalButton" 
    data-dismiss="modal" 
    data-toggle="modal"
    data-target="#secondModal">Second modal</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstModal">
  Launch first modal
</button>

<!-- First Modal -->
<div class="modal fade" id="firstModal">
  <div class="modal-dialog">
    <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">Modal title</h4>
      </div>
      <div class="modal-body">
        First Modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="secondModalButton" data-dismiss="modal" data-toggle="modal" data-target="#secondModal">Second modal</button>
      </div>
    </div>
  </div>
</div>

<!-- Second Modal -->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="secondModal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        Second modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>