Drop down lists script

Question

How do I add an array of values to this javascript so it lists them in the drop down lists? I've got this far and I am really stuck, I think it must be a small addition to javascript.

Any help would be great.

JAVASCRIPT
        var counter = 0;

function addNew() {

// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');

// 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('select');
newText.type = "select"; 


//for testing
newText.value = counter++;

// Create buttons for creating and removing inputs
var newAddButton = document.createElement('input');
newAddButton.type = "button";
newAddButton.value = " + ";

var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";

// Append new text input to the newDiv
newDiv.appendChild(newText);

// Append new button inputs to the newDiv
newDiv.appendChild(newAddButton);
newDiv.appendChild(newDelButton);

// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);

// Add a handler to button for deleting the newDiv from the mainContainer
newAddButton.onclick = addNew;

newDelButton.onclick = function() {
        mainContainer.removeChild(newDiv);
};
}

HTML

<select name="text">
                <option value="t1">t1</option>
                <option value="t2">t2</option>
                <option value="t3">t3</option>
              </select>
              <input type="button" value=" + " onClick="addNew();">

EDIT PHP

 <?php
$name = $_POST['name'];
$email = $_POST['email'];
$number = $_POST['number'];
$Occasion = $_POST['Occasion'];
$Venues = $_POST['Venues'];
$date = $_POST['date'];
$guests = $_POST['guests'];
$custom = $_POST['custom'];
$from = $email; 
$to = 'ash.manterfield@btinternet.com'; 
$subject = 'New Menu Order';
$human = $_POST['human'];

$body = "From: $name\n Contact Number: $number\n E-Mail: $email\n Occasion: $Occasion\n    

Venues Looked At: $Venues\n Event Date: $date\n Number of Guests: $guests\n Custom    
Menu:\n $custom";

if ($_POST['submit']) {
if ($name != '' && $email != '') {
    if ($human == '4') {                 
        if (mail ($to, $subject, $body, $from)) { 
        echo '<h4>Your message has been sent!</h4>';
    } else { 
        echo '<h4>Something went wrong, go back and try again!</h4>'; 
    } 
} else if ($_POST['submit'] && $human != '4') {
    echo '<h4>You answered the anti-spam question incorrectly!</h4>';
}
} else {
    echo '<h4>You need to fill in all required fields!!</h4>';
}
}
 ?>

Cheers

Answer 1

To get the values from previous select box. Add below code right after the function addNew() {

function addNew() {

    var countAll = document.getElementsByTagName("select").length - 1;

    var lastSelectBox = document.getElementsByTagName("select")[countAll];

    var items = lastSelectBox.innerHTML;

Here i'm getting the last selectbox created in the document.

And add new html of items after:

var newText = document.createElement('select');
newText.type = "select";

//Attribute Name use for form elements    
newText.setAttribute('name', 'text['+counter+']');

//Attribute id
newText.setAttribute('id', 'text_' + counter);

newText.innerHTML = items;

You can see working jsfiddle