I have create the form with selection option. Based on the selection i show and hide the form value and i don't know to save it in database. In my code there is selection option i show the form field again.for example if i select the option is 3 i am showing form field 3 times.
I want to store the data in backend(database). How to store the database.
My code
$(document).ready(function() {
  $('#hidden-div').hide();
  $("#select_btn").change(function() {
    toggleFields();
  });
});
function toggleFields() {
  var selectVal = $("#select_btn").val();
  if (selectVal <= 5) {
    $hiddenHtml = $('#hidden-div').clone().html();
    $("#refer").html('');
    for (var i = 0; i < selectVal; i++) {
      $("#refer").append($hiddenHtml);
    }
  }
}
$( "form" ).submit(function( event ) {
  console.log( $( this ).serializeArray() );
  event.preventDefault();
});<html>
<head>
<title> Demo </title>
<meta name="robots" content="noindex, nofollow" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="referer" method="post" action="">
  <p>Name:
    <input type="text" name="referer_name" />
  </p>
  <p>Mobile:
    <input type="text" name="referer_mobile" />
  </p>
  <p>Email:
    <input type="text" name="referer_email" />
  </p>
  <p>No of Referrer:
    <select id="select_btn" >
      <option value="0">--Select--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <div id="hidden-div">
 <div id="text">Referral Details</div>
      <p>Name:
        <input type="text" name="name[]" />
      </p>
      <p>Mobile:
        <input type="text" name="mobile[]" />
      </p>
      <p>Email:
        <input type="text" name="email[]" />
      </p>
      
    </div>
    <div id="refer">
    </div>
    <p align="center">
      <input type="submit" value="Submit" />
    </p>
</form> 
    