Multiple inline insert using Ajax & JSP

Question

I wanted to inline multiple inserts using Ajax & Jsp. It's working but inserting like comma separated Value, please see the image. But I want to insert into a database split value. like

Student Name              Student email
name1                     name1@gmail.com
name2                     name2@gmail.com
name3                     name3@ymail.com   

below is my code.

Index.html

$(document).ready(function() {
  var id = 1;
  /*Assigning id and class for tr and td tags for separation.*/
  $("#butsend").click(function() {
    var newid = id++;
    $("#table1").append('<tr valign="top" id="' + newid + '">\n\
        <td width="100px" >' + newid + '</td>\n\
        <td width="100px" class="name' + newid + '">' + $("#name").val() + '</td>\n\
        <td width="100px" class="email' + newid + '">' + $("#email").val() + '</td>\n\
        <td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>');
  });
  $("#table1").on('click', '.remCF', function() {
    $(this).parent().parent().remove();
  });
  /*creating new click event for save button*/
  $("#butsave").click(function() {
    var lastRowId = $('#table1 tr:last').attr("id"); /*finds id of the last row inside table*/
    var name = new Array(); /*Array Variable*/
    var email = new Array();
    for (var i = 1; i <= lastRowId; i++) {
      name.push($("#" + i + " .name" + i).html()); /*pushing all the names listed in the table*/
      email.push($("#" + i + " .email" + i).html()); /*pushing all the emails listed in the table*/
    }
    var sendName = JSON.stringify(name);
    var sendEmail = JSON.stringify(email);
    $.ajax({
      url: "save.jsp",
      type: "post",
      data: {
        name: sendName,
        email: sendEmail
      },
      success: function(data) {
        alert(data); /* alerts the response from php.*/
      }
    });
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div style="margin: auto;width: 60%;">
  <form id="form1" name="form1" method="post">
    <div class="form-group">
      <label for="email">Student Name:</label>
      <input type="text" name="sname" class="form-control" id="name">
    </div>
    <div class="form-group">
      <label for="pwd">Student email:</label>
      <input type="text" name="email" class="form-control" id="email">
    </div>
    <input type="button" name="send" class="btn btn-primary" value="add data" id="butsend">
    <input type="button" name="save" class="btn btn-primary" value="Save to database" id="butsave">
  </form>
  <table id="table1" name="table1" class="table table-bordered">
    <tbody>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>email</th>
        <th>Action</th>
        <tr>
    </tbody>
  </table>
</div>

save.jsp

   <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    
 <%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>

<%
String name = request.getParameter("name"); // Parameter from html form
String email = request.getParameter("email");
try
{
         Class.forName("com.mysql.jdbc.Driver");
           Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mm_db", "sjgf", "lkdfghd"); // Connection String
           Statement st=conn.createStatement(); 
           int j=st.executeUpdate("insert into user_data(Name, email)values('"+name+"','"+email+"')"); // Insert Query
       out.println("Data is successfully inserted!");
        }
        catch(Exception e)
        {
        System.out.print(e);
        e.printStackTrace();
        }
 %>