Thank you message on same page is disappearing when we use custom html with Marketo form

Thank you San, This is the code I added.

<script src="app-xxxx.marketo.com/js/forms2/js/forms2.min.js"></script>

<form class="form" id="mktoForm_xxxx" style="display:none;"> </form>

<script>MktoForms2.loadForm("app-xxxx.marketo.com", "xxx-xxx-xxx", xxxx);</script>

<div class="container news-letter wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">

<div id="first" style="display:">

<form action="" data-drupal-form-fields="Unsubscribed" id="contactform" method="post" >

<div class="container wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">

<div class="row justify-content-center">

<div class="col-lg-3 col-md-3">

<div class="input-field"><input data-invalid-message="Name is required." id="name" required="" type="text" /> <label for="name" id="f-name">First name:</label></div>

</div>

<div class="col-lg-3 col-md-3">

<div class="input-field"><input id="last-name" required="" type="text" /> <label for="last-name">Last name:</label></div>

</div>

<div class="col-lg-3 col-md-3">

<div class="input-field"><input id="email" required="" type="email" /> <label for="email">Email:</label></div>

</div>

<div class="col-lg-offset-1 col-lg-6 col-md-6 unsub"><select class="mktoField mktoHasWidth mktoRequired" id="Unsubscribed" name="Unsubscribed" required="" style="width: 150px;"><option value="">Select...</option><option value="No">Yes</option><option value="Yes">No</option> </select> <label for="" style="

    top: 23px;

"> By signing up you will receive </label></div>

<div class="col-lg-offset-1 col-md-offset-2 col-lg-3 col-md-3" style="

    margin: 50px 0px;

    text-align: right;

">

<div class="form"><button class="submit-btn" type="submit">Suscribe now</button></div>

</div>

</div>

</div>

</form>

</div>

<div class="success-message" id="confirmation" style="display:none;">

<p class="text-center">Thank you for submitting your details.</p>

</div>

</div>

<script src="ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">

         $(document).ready(function() {

  // populate the text fields

  $('#name').on('change', function() {

    $('#FirstName').val( $(this).val() );

  });

  $('#last-name').on('change', function() {

    $('#LastName').val( $(this).val() );

  });

  $('#email').on('change', function() {

    $('#Email').val( $(this).val() );

  });

  $('#contact_phone').on('change', function() {

    $('#Phone').val( $(this).val() );

  });

function changeColor(id, newColor) {

  $("#" + id).prev().css("color", newColor);

}

$('#FirstName').on('change', function() {

    changeColor('FirstName', 'red');

});

  // populate the select field

  $('[name="Unsubscribed"]').on('change', function() {

    var selected = $(this).val();

    var matchValue = $('#Unsubscribed option[value="' + selected + '"]');

    matchValue.prop('selected', true);

  });

  // submit button functionality

$('.submit-btn').on('click',function(e) {

  var myForm = MktoForms2.allForms()[0];

            if(!$('#FirstName').val()== "" && !$('#LastName').val()== "" && !$('#Email').val()== "" && !$('[name="Unsubscribed"]').val() == "") {

                myForm.submit();

              document.getElementById('contactform').style.display = 'block';

              document.getElementById('confirmation').style.display = 'block';

              e.preventDefault();

            }

  });

}); 

      </script>