Кнопка для 2-го модального окна Bootstrap не работает (не кликабельна)

У меня есть 2 модели начальной загрузки на одной странице, первая модальная открывается и работает, как и ожидалось. После сохранения данных формы в первом модальном окне видна кнопка для открытия второго модального окна. Однако кнопка не активна:

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

Я нашел несколько, у которых были похожие проблемы с двумя модальными окнами на одной странице, но, похоже, общих причин не было. Как я могу это исправить? Желательно, чтобы кнопка работала. Если по какой-то причине это невозможно, я согласен с тем, что JS автоматически открывает второе модальное окно после закрытия первого. Мне также не удалось заставить это работать. Я трижды проверил, что все мои теги закрыты и правильно расположены. Я опустил большую часть содержимого формы в модальных окнах в приведенном ниже коде для краткости. Я также включил свой JS в конце страницы, который управляет видимостью модальных окон.

    <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> 

Заранее спасибо!