Q: html forms with its model not submit I have three buttons and three forms into their divs(Models) at one page. All divs(Models) with their forms are hidden.  First time when page is loaded. One div with its ID and its form is cloned and shown into another div#replace section. Then When I try to submit it. its not submitted the form. why? see code here
here all div(Models) with its form is replace when click on button
<div class="row">
  <h1 class="text-center margin-top10 fsize60"></h1>
  <section class="text-center replace-section">
    <!-- forms are shown here when button is click  -->
  </section>

 
    $(document).ready(function() {

      $("#frm_infradi_result").click().clone().removeClass('hide').addClass('show').prependTo(".replace-section");

      $("button[name='btn_infradi_result']").click(function() {
        $('.replace-section').empty();
        $("#frm_infradi_result").click().clone().removeClass('hide').addClass('show').prependTo(".replace-section");
      });

      $("button[name='btn_madaris_result']").click(function() {
        $('.replace-section').empty();
        $("#frm_madaris_result").click().clone().removeClass('hide').addClass('show').prependTo(".replace-section");
      });

      $("button[name='btn_hifz_result']").click(function() {
        $('.replace-section').empty();
        $("#frm_hifz_result").click().clone().removeClass('hide').addClass('show').prependTo(".replace-section");
      });

      $("button[name='btn_nazer_sani']").on('click', function() {
        $('#modal_nazer_sani').show();
      });

    });


<!-- 1 div#frm_infradi_result with its form -->

<div class="col-md-7 col-md-push-3 animated fadeInRight animation-delay-5 hide" id="frm_infradi_result">
  <div class="panel panel-info">
    <div class="panel-heading text-center">
      <h3 class="h2 ur no-margin-padding" style="display: inline;">
                انفرادى مکتب نتائج برائے سال 1437ھ
            </h3>
      <i class="fa fa-users" aria-hidden="true"></i> 
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-12">
          <form method="post" id="frm_result" action="mailto:itsoftsaeed@gmail.com">
            <!-- here is form elements list -->
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- 2 div#frm_madaris_result with its form -->

  <div class="col-md-7 col-md-push-3 animated fadeInRight animation-delay-5 hide" id="frm_madaris_result">
    <div class="panel panel-info">
      <div class="panel-heading text-center">
        <h3 class="h2 ur no-margin-padding" style="display: inline;">
                انفرادى مکتب نتائج برائے سال 1437ھ
            </h3>
        <i class="fa fa-users" aria-hidden="true"></i> 
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-xs-12">
            <form method="post" id="frm_madaris" action="mailto:itsoftsaeed@gmail.com">
              <!-- here is form elements list -->
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- 3 div#frm_hifz_result with its form -->

    <div class="col-md-7 col-md-push-3 animated fadeInRight animation-delay-5 hide" id="frm_hifz_result">
      <div class="panel panel-info">
        <div class="panel-heading text-center">
          <h3 class="h2 ur no-margin-padding" style="display: inline;">
                انفرادى مکتب نتائج برائے سال 1437ھ
            </h3>
          <i class="fa fa-users" aria-hidden="true"></i> 
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-12">
              <form method="post" id="frm_hifz" action="mailto:itsoftsaeed@gmail.com">
                <!-- here is form elements list -->
              </form>
            </div>
          </div>
        </div>
      </div>

