如何在submissin之后在我的表单上显示成功消息

Question

目前，我的成功消息仅在提交表单后显示在提交按钮旁边。此外，我的表单在提交后不会清除字段并保持不变，但它在发送电子邮件方面确实有效。如何以新的div而非我的形式显示我的成功消息？

我的表格：

<section class="inspiration" id="three">
  <div class="overlay">
    <div class="container">
      <div class="row">
        <article class="col-md-12 text-center">
          <div class="intermediate-container">
            <div class="heading wow fadeInUp">
              <h2>יש לכם שאלה? צרו איתי קשר</h2>
            </div>
            <div class="row">
              <div class="col-md-3 col-sm-3"></div>
              <div class="col-md-6 center-block col-sm-6 ">
                <form id="mc-form" method="POST">
                  <div class="form-group col-xs-12 wow fadeInUp">
                    <label for="name" hidden>שם פרטי</label>
                    <input type="text" name="name" id="name" class="cv form-control" placeholder="שם פרטי">
                    <span class='error-message' id='name-error'></span>
                  </div>
                  <div class="form-group col-xs-12 wow fadeInUp ">
                    <label for="phone" hidden>טלפון</label>
                    <input type="text" name="phone" id="phone" class="cv form-control" placeholder="טלפון">
                    <span class='error-message' id='phone-error'></span>
                  </div>
                  <div class="form-group col-xs-12  wow fadeInUp">
                    <label for="email" hidden>דואר אלקטרוני</label>
                    <input type="email" name="email" id="email" class="cv form-control" placeholder="דואר אלקטרוני">
                    <span class='error-message' id='email-error'></span>
                  </div>
                  <div class="form-group col-xs-12 wow fadeInUp ">
                    <label for="subject" hidden>נושא</label>
                    <input type="text" name="subject" id="subject" class="cv form-control" placeholder="נושא">
                    <span class='error-message' id='subject-error'></span>
                  </div>
                  <div class="form-group col-xs-12  wow fadeInUp">
                    <label for="message" hidden>הודעה</label>
                    <textarea name="message" id="message" class="cv form-control message" placeholder="השאירו את הודעתכם פה" rows="4" cols="50"></textarea>
                    <span class='error-message' id='message-error'></span>
                  </div>
                  <!-- <input type="submit" id="submit-button" class="btn btn-custom-outline " value="שלח" > -->
                  <button class="btn btn-custom-outline wow fadeInUp" id="submit-button">שלח</button>
                  <span class='error-message' id='submit-error'></span>
                  <span class="success">Thank's for submitting the form</span>
                </form>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>

我的剧本：

function sendForm() {
  $('[id*="-error"]').text(''); 
  event.preventDefault(); 
  $.ajax({
    type: 'POST',
    url: './send.php',
    data: $("#mc-form").serialize(),
    success: function(data) {
      if(data.hasOwnProperty('error')) {
        Object.keys(data['error']).forEach(function(key) {
          producePrompt(data['error'][key], key+'-error', 'red');
        });
      }
      if(data.hasOwnProperty('mail_error')) {
        alert('Could not send mail');
      }
      if(data.hasOwnProperty('success')) {
        $('.success').show();
      }
    }
  });
}