How to show success message on top of my form after submissin

Question

Currently my success message appears only next to submit button once the form is submitted.Also my form doesn't clear the fields after the submission and stays the same, but it does work in terms of sending email. How can I show my success message in a new div instead of my form?

My form:

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

My script:

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();
      }
    }
  });
}