TinyMCE and AJAX is not sending data to php in mysql server

  <!-- Page containing form -->

<html>  
   <head>  
      <meta charset="utf-8">
      <title>Paragraph</title>  
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script> 
      <!-- Just be careful that you give correct path to your tinymce.min.js file, above is the default example -->
      <script>tinymce.init({selector:'textarea'});</script>
   </head>
   <body>  
      <!-- <div id="froala-editor"></div> -->
      <div class="container">  
        <br />  
        <br />  
        <h2 align="center">Enter a new paragraph</h2>  
        <div class="form-group">  
          <form name="add_paragraph" id="add_paragraph">  
             <div class="table-responsive">  
                <table class="table table-bordered" id="dynamic_field">
                   <tr>
                      <input type="text" name="paragraph_name" placeholder="Enter paragraph name" class="form-control paragraph_name" />
                    </tr>
                    <tr>
                      <textarea id = "paragraph" type="text" name="paragraph" placeholder="Enter paragraph text"></textarea>
                    </tr>
                    </tr>  
                </table>  
                <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
             </div>  
          </form>  
        </div>
     </div>
  </body>    
</html>

JavaScript

<script>
    $(document).ready(function(){   
       $('#submit').click(function(){            
            $.ajax({  
                 url:"form1_support.php",  
                 method:"POST",  
                 data:$('#add_paragraph').serialize(),  
                 success:function(data)  
                 {  
                      alert(data);  
                      $('#add_paragraph')[0].reset();  
                 }  
            });  
        });
    });
</script>

PHP

<!--page1_support.php form begins here-->

<?php
   require 'db/connect.php';

   $number = count($_POST["paragraph_name"]);  //it said experience before, maybe experience_list?

   if($number > 0) {
      for($i=0; $i<$number; $i++) {  
         if(trim($_POST["paragraph_name"] != '')) {  
            $paragraph_name = mysqli_real_escape_string($db, $_POST['paragraph_name']);
            $paragraph_text = mysqli_real_escape_string($db, $_POST['paragraph']);
            $sql = "INSERT INTO paragraph (paragraph_name, paragraph_text) 
                    VALUES( '$paragraph_name', '$paragraph_text')";  
             mysqli_query($db, $sql);  
         }
      }  
      echo "Data Inserted";
    } else {  
      echo "Please Enter Your Paragraph.";
    }
?>

Solution

If you are replacing a textarea with TinyMCE then the actual textarea does not get updated automatically unless one of the following happens:

You perform a standard HTML form submission - in this scenario TinyMCE will automatically update the textarea at the start of the form submission process.
You use the triggerSave() API to force TinyMCE to update the textarea.

Try adding a triggerSave() call before you send the AJAX request.

https://www.tiny.cloud/docs/api/tinymce/root_tinymce/#triggersave