multi select drop downs in php ajax

Question

My HTML form is submits to a URL via ajax.

data is inserting twice in one column and never inserting data from the second drop down ... I dont know why Literally fed up with debugging. Please anyone do trace out the glitch

$thispage = 'sbt_teacher';
include ('top-page.php'); ?>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

<h2 class="text-center page-heading">Register as Tech </h2>



<div class="container pb-2">
  
   <form method="post" id="framework_form">


      <div class="row">

    <div class="col-12 col-md-6 p-1 pt-2">
      <label>Name:</label>
      <input class="form-control" type="text" name="s_name" id="s_name"/>
      <div class="error_div">
              <span id="error_s_name" class="error_span"></span>
          </div>
    </div>

    <div class="col-12 col-md-6 p-1 pt-2">
      <span> Gender: </span><br>
    <label class="label_gender">Male
      <input type="radio" name="s_gender" class="radio_gender" id="s_gender" value="t_male"/>
    </label>
    <label class="label_gender">Female
      <input type="radio" name="s_gender" class="radio_gender" id="s_gender" value="t_female" />
    </label>
    <div class="error_div">
              <span id="error_s_gender" class="error_span"></span>
       </div>
    </div>

  </div> <!-- row 1 ends -->

  <div class="row">


<div class="col-12 col-md-6 p-1 pt-2">
     <div class="form-group">
     <label>Select the class(es) you can teach</label>

     <select multiple class="form-control" name="s_class[]" id="s_class"/>
     
      <?php 

      while ($all_ad_class_f = mysqli_fetch_array($all_ad_class) ) {
        ?>
      <option value="<?php echo $all_ad_class_f['class']; ?>"> <?php echo $all_ad_class_f['class']; ?> </option>
      <?php 

        }

       ?>

    </select>
    </div> <!-- form group ends here -->

    <div class="error_div">
              <span id="error_s_class" class="error_span"></span>
          </div>
      </div> <!-- col ends here -->


        <div class="col-12 col-md-6 p-1 pt-2">
       <div class="form-group">
     <label>Select the subjects you can teach</label>

     <select multiple class="form-control" name="s_subjects[]" id="s_subjects"/>
     
      <?php 

      while ($all_ad_sbject_f = mysqli_fetch_array($all_ad_sbj) ) {
        ?>
      <option value="<?php echo $all_ad_sbject_f['sbj']; ?>"> <?php echo $all_ad_sbject_f['sbj']; ?> </option>
      <?php 

        }

       ?>

    </select>
    </div> <!-- form group ends here -->

<div class="error_div">
              <span id="error_s_subjects" class="error_span"></span>
          </div>
      </div> <!-- col ends here -->

  </div> <!-- row 2 ends -->


  <div class="row">
   <div class="col-12">
    <input type="submit" class="btn btn-info" name="submit_tech" value="Submit" onClick="submit_data()"/> 
    </div>
  </div>

    <div class="row">
    <div class="col-12">
       <span id="msgSuccess"></span>
    </div>
    </div>

   </form>
 
  </div>

<script>
$(document).ready(function(){
 $('#s_class').multiselect({
  nonSelectedText: 'Select class',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });
});



$(document).ready(function(){
 $('#s_subjects').multiselect({
  nonSelectedText: 'Select Subject',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });

});



 
 $('#framework_form').on('submit', function(event){



   event.preventDefault();
  var class_data = $(this).serialize();

  event.preventDefault();
  var sbj_data = $(this).serialize();


  var s_name = jQuery('#s_name').val();
  var s_gender = jQuery(".radio_gender:checked").val();

  var datastring = 's_name=' + s_name + '&s_gender=' + s_gender + '&s_subjects=' + sbj_data + '&s_class=' + class_data;

  // var all_data = class_data + datastring;

  $.ajax({
   url:"submit-as-tech.php",
   method:"POST",
   data:datastring,
   //alert(data),
   success:function(data)
   {

   // alert(data);



    $('#s_class option:selected').each(function(){
     $(this).prop('selected', false);
    });
    $('#s_class').multiselect('refresh');
    jQuery('#error_s_class').html(data);


    $('#s_subjects option:selected').each(function(){
     $(this).prop('selected', false);
    });
    $('#s_subjects').multiselect('refresh');
    jQuery('#error_s_subjects').html(data);

   }, //jQuery('#msgSuccess').html(data);
  }); document.getElementById("framework_form").reset();

 }); 
 

</script>

<?php include('footer.php'); ?>

</body>
</html>
<?php include('bottom-page.php'); ?>

Here is my submit-as-tech.php code

<?php
include('gerf/fg.php');


$stmt = $conn -> prepare("INSERT INTO `teachersnew` (`t_name`, `t_gender`, `t_subjects`) VALUES (?, ?, ?)");

$stmt -> bind_param("sss", $s_name, $s_gender, $data_sbj);


        $s_name = ucfirst( $_POST['s_name'] );
        $s_gender = $_POST['s_gender'];
    //  $s_class = $_POST['s_class'];
        $s_subjects = $_POST['s_subjects'];
    


 // $data_class = '';
 // foreach($s_class as $row_class)
 // {
 //  $data_class .= $row_class . ', ';
 // }
 // $data_class = substr($data_class, 0, -2);


 $data_sbj = '';
 foreach($s_subjects as $row_sbj)
 {
  $data_sbj .= $row_sbj . ', ';
 }
 $data_sbj = substr($data_sbj, 0, -2);

//die( 'Name: ' . $s_name . ' Gender: ' . $s_gender . ' Classes: ' . $data_class );

$stmt -> execute();


 die( 'thk' );
$stmt -> close();
$conn -> close();

 

?>

here is the result