How to send an array in email via ajax and php - php

Question

am a learner and I need your assistance. I have an online form for job application where you can list past jobs and enter referees. The problem is I want to send the details, which are in arrays but can't seem to catch a break.
This is the html form
<fieldset>
<h2>7: Referees</h2>
<div class="row clone3">
<div class="form-group">
<label for="address">Name</label>
<input type="text" class="form-control" id="name" name="name[]" placeholder="Name">
</div>
<div class="form-group">
<label for="address">Contact (Email)</label>
<input type="text" class="form-control" id="phone" name="phone[]" placeholder="Referee contact">
</div>
<div class="form-group">
<label for="address">Contact (Mobile)</label>
<input type="text" class="form-control" id="email" name="email[]" placeholder="Referee contact">
</div>
</div>
<div class="row"><div class="col-xs-12" align="center">Add Another Referee</div><br/><br/></div>
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="submit" name="submit" class="submit btn btn-success" value="Submit Application" id="form-submit" />
<div id="msgSubmit" class="h3 text-center hidden"></div>
</fieldset>
This is the script to process the form
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Did you fill in the form properly?");
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&phone=" + phone,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
function formSuccess(){
$("#contactForm")[0].reset();
submitMSG(true, "Message Sent! We'll get back shortly. Thank you! ")
}
function formError(){
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
function submitMSG(valid, msg){
if(valid){
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
Below is the php code to send the form via email.
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// PHONE
if (empty($_POST["phone"])) {
$errorMSG .= "Phone number is required ";
} else {
$phone = $_POST["phone"];
}
$EmailTo = "xyz#gmail.com";
$Subject = "New Application From the Website";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Phone: ";
$Body .= $phone;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
Now, the problem is the form only sends the email as one referee, even if I enter several referees.