В спецификации указано, что среди содержимого формы не может быть других форм.
Так как в твоем случае одна форма вложена в другую, разметка невалидна и браузеры могут обрабатывать ее по своему желанию, например Chrome и EDGE просто удалят внутреннюю форму.
Из-за этого, в момент выполнения скрипта элемента с id="panel"
нет и соответственно, сообщение добавляется в никуда.
Для решения нужно либо заменить форму на тот же див, если нужна именно такая вложенность, либо убрать внутреннюю форму и вставлять в оставшийся контейнер, например:
$(function() {
$('#button').on('click', function() {
var message = $('<span>Ваша заявка принята!</span>');
$('#panel').append(message);
$('#button').remove();
});
});
<form id="form" metod="post">
<div class="text-center">
<h4>ОСТАВЬТЕ ЗАЯВКУ</h4>
<div id="panel">
<input type="text" name="name" placeholder="Имя"><br>
<input type="text" name="tel" placeholder="Телефон"><br>
<input type="text" name="email" placeholder="E-mail"><br>
<input type="submit" name="submit" id="button" value="ОТПРАВИТЬ">
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
$(function() {
$('#button').on('click', function() {
var message = $('<span>Ваша заявка принята!</span>');
$('#form .text-center').append(message);
$('#button').remove();
});
});
<form id="form" metod="post">
<div class="text-center">
<h4>ОСТАВЬТЕ ЗАЯВКУ</h4>
<input type="text" name="name" placeholder="Имя"><br>
<input type="text" name="tel" placeholder="Телефон"><br>
<input type="text" name="email" placeholder="E-mail"><br>
<input type="submit" name="submit" id="button" value="ОТПРАВИТЬ">
</div>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
form
еще одинform
?html
изучите.