title: How to save multiple data from dynamically added text-boxes (JavaScript) into MySQL database?
body: <p>I have been trying for this but no success. I am using PHP, HTML, JavaScript, and MySQL. Here is my HTML code:</p>
  
  <pre><code>&lt;div id="Author"&gt;
      &lt;LI&gt;Author&lt;/LI&gt; 
      &lt;input type = "text" name="Author[]" value = "1. "/&gt;
      &lt;input type="button" value="+" id="Authorbutton" onclick="addAuthor()" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If add button is clicked, another textbox will appear and user and put in another name. Here is my JavaScript:</p>
  
  <pre><code>var counter3 = 0;
  function addAuthor() {
      // Get the main Div in which all the other divs will be added
      var mainContainer = document.getElementById('Author');
  
      // Create a new div for holding text and button input elements
      var newDiv = document.createElement('div');
  
      // Create a new text input
      var newText = document.createElement('input');
      newText.type = "text";
      //var i = 1;
      newText.name = "Author[]";
      newText.value = counter3 + 2 + ". ";
  
      //Counter starts from 2 since we already have one item
      //newText.class = "input.text";
      // Create a new button input
      var newDelButton = document.createElement('input');
      newDelButton.type = "button";
      newDelButton.value = "-";
  
      // Append new text input to the newDiv
      newDiv.appendChild(newText);
      // Append new button input to the newDiv
      newDiv.appendChild(newDelButton);
      // Append newDiv input to the mainContainer div
      mainContainer.appendChild(newDiv);
      counter3++;
      //i++;
  
      // Add a handler to button for deleting the newDiv from the mainContainer
      newDelButton.onclick = function() {
          mainContainer.removeChild(newDiv);
          counter3--;
      }
  }
  </code></pre>
  
  <p>Here is my PHP code:</p>
  
  <pre><code>if (!$con)
    {
    die('Could not connect: ' . mysql_error());
    }
  
  mysql_select_db($database, $con);
  
  
  
  $sql="INSERT INTO savetest (type, number)
  VALUES
  ('$_POST[type]','$_POST[Author]')";
  
  if (!mysql_query($sql,$con))
    {
    die('Error: ' . mysql_error());
    }
  echo "1 record added";
  
  mysql_close($con);
  echo "Thank you for submitting your details!";
  </code></pre>
  
  <p>I heard a lot of people can get this to work by using arrays, but the data I stored in the database is <code>Array</code>. It does not matter how many textboxes I've created, just <code>Array</code>.</p>
  
  <p>Am I using the correct approach? Should I save this array of data in one database fields?</p>