动态文本字段不能取值jquery php

Question

I'm trying to add/remove items dynamically but I can't take the values of all the elements of the array.

Basically I have this form

<form action="" method="post">
    <div class="input_fields_wrap">
        <div>
            <label> <span>Team name </span> 
            <input type="text" class="input-field" name="teams[]"> </label>
        </div>
    </div>
    <span id="num_teams"></span> <label><span>&nbsp;</span>
    <input type="submit" value="Add Team" class="add_field_button" name="add_field_button">
    <input type="submit" name="next" value="Next" />
    </label> 
</form>

It just shows an input box where I'd have to insert the team name and two buttons ; one to go to the next page, and the other one to add a new text field using jquery. Here it is the jquery script

<script type="text/javascript">
$(document).ready(function() {



    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
    e.preventDefault();
var max_fields = $('#n_teams').val(); //maximum input boxes allowed
    if(x < max_fields){ //max input box allowed
        x++; //text box increment

        $(wrapper).append('<div><label><span>Team Name </span><input type="text" class="input-field" name="teams[]">  <a href="#" class="remove_field">Delete</a></label></div>'); // add input box
        $("#num_teams").html('Number of Teams: '+x);

    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('label').remove(); x--;
    $("#num_teams").html('Number of Teams: '+x);
})
});
</script>

The script above works perfectly: it adds and removes textfields.

The problem that I have now is that I can't take the values of the array 'teams[]' . in a

if(isset($_POST['next'])) 

even if I try to take the values manually like

echo $_POST["teams"][0]; and 
echo $_POST["teams"][1]; ect...

It just takes the first value (ie the one I don't add using jquery). It doesn't 'see' the jquery text fields added.

Of course my final aim is to insert 'teams[]' in a mysql table, but for now I noticed that I can't either take the values.

Where am I wrong ?

EDIT - SOLVED It was a very stupid error I made in the html code. Actually there was a <div> before of the <form> that caused all the troubles. After a very accurate analysis , trying every single piece of code alone, I finally got that I just had to move the <form> above two <div> to make the code work. I do apologize to everyone, silly me!

Answer 1

Instead of using name="teams[]" use name="teams" and on server side use:

$_POST['teams']

which should give you the comma separated list.

Answer 2

var wrapper = $（“。input_fields_wrap”）。first（）;