Что я делаю не так в сценарии для модальных окон?

Question

[именно самое]

В общем суть такая. У меня есть модальное окно. Оно выхывается по нажатию. Я же же пытаюсь сделать так что бы, отправились данные ajax-ом, пропало окно, и появилось новое окно и через неськолько секунд бралось.

Что я делаю не так??

вот код.

$(document).ready(function() {
    
    var phonemodal;
    var senksphonemodal;
    //noinspection JSAnnotator
    senksphonemodal = `
<div id="Senks" class=\"modal fade\" data-toggle=\"modal\" tabindex=\"-1\">
  <div class=\"modal-dialog modal-sm\">
    <div class=\"modal-content\">
      <!-- Основное содержимое модального окна -->
      <div class=\"modal-body\">
         <h5>Спасибо за обращение вам перезвонят.</h5>
      </div>
  </div>
</div>
    </div>`;
    
    
    //noinspection JSAnnotator
    phonemodal = `
  <div id="FerstModal"  class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- Заголовок модального окна -->
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">Оставьте ваши данные и вам перезвонят.</h4>
    </div>
    <!-- Основное содержимое модального окна -->
    <div class="modal-body">
        
        <form id="formPhone"  method="post"  class="formPhone form-horizontal" role="form">
        <div class="form-group">
        <label for="inputName" class="col-xs-4 control-label">Как вас зовут?</label>
    <div class="col-xs-7">
        <input type="text" name="name" class="form-control" id="inputName" placeholder="Ваше имя?"  required>
    </div>
    </div>
    <div class="form-group">
    
        <label for="inputPhone" class="col-xs-4 control-label">Ваш телефон</label>
    <div class="col-xs-7">
        <input type="text" name="phone" class="form-control" id="inputPhone" placeholder="Введите  ваш номер телефона"
         required>
    </div>
    </div>
    <!-- Футер модального окна -->
    <div class="modal-footer">
        <button  id="send" type="submit"  class="btn  btn-primary "  > Оставить заявку</button>
    </div>
    </form>
    </div>
    
    </div>
    </div>
    </div>`;
    
    
    $('button.Phone').click(function () {
        $(phonemodal).appendTo('body');
        
        $('#send').click(
            function () {
                $.ajax({
                    url: "ajax.php",
                    data: {
                        "name": $("#inputName").val(),
                        "phone": $("#inputPhone").val()
                    },
                    type: 'POST'
                })
            });
        $('#FerstModal').fadeOut();
        $(senksphonemodal).appendTo('body');
        $("#Senks").fadeOut(4000);
    });
    
});

Answer 1

[Алексей]

Вот максимально простой пример того, что нужно https://youtu.be/vAgCY6L6n3I