Javascript Add New Input Field in Increasing Order

Question

I'm having trouble getting my javascript to add a variable to getElementById. What I'm doing is allowing the users to have 10 authors per post. The script shows the authors already entered in the system and now I'm trying to allow them to add more input fields only to the point that 10 fields show up. Here is the code I have so far:

$y=1;
//GET EXISTING AUTHORS FOR POST
while ($getauthorsrow=$getauthorssql->fetch()) {
    $showauthor = $getauthorsrow['author'];
    $authorid = $getauthorsrow['ID'];
    echo "<input type='text' value='$showauthor' name='authorname[]'>
    <input type='hidden' value='$authorid' name='authorid[]'><br><br>";
    $y++;
}
$newy=$y-1;
?>

//SCRIPT TO ADD NEW FIELD ONLY TO THE POINT OF 10
<script language="javascript">
fields = <?php echo $newy; ?>;
    function addInput<?php echo $i; ?>() {
    if (fields != 10) {

        //HERE I'M TELLING IT TO GET text + $i (which is post number) + fields variable
        //So if it's the first post and the new field divs start a 5
        //Then it should getElementByid('text05') and continue on.

        document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
        fields += 1;
    } else {
        document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<br />Only 10 authors allowed.";
        document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
    }
}
</script>

//HERE I'M ADDING THE NEW DIVS FOR TEXT FIELDS AND STARTING
//THEM AT WHATEVER NUMBER POST $i IT IS AND WHATEVER THE $w is.
//SO IN THE EXAMPLE IN THE JAVASCRIPT IT'D SAY id='text05'
//THIS WORKS JUST FINE
<?php
$w=$newy;
while ($w<=10) {
    echo "<div id='text".$i.$w."'></div>";
    $w++;;
}

//ECHO THE ADD AUTHOR BUTTON
echo "
<input type='button' onclick='addInput$i()' name='add$i' value='Add Author'><br>
<input type='hidden' name='count' value='$newy'>
<input type='hidden' name='id' value='$fileid'>
<input type='submit'>
</form>
";
?>

$i is the post number starting from 0. The php to make the divs works fine. I'm just getting null for the getElementById in the javascript. What am I getting wrong here?

HTML Output Example:

<form id="ajaxform0">
    <input type="text" value="Logan" name="authorname[]">
        <input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
        <input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
        <input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
        <input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
        <input type="hidden" value="129" name="authorid[]"><br><br>    
    <script language="javascript">
    fields = 5;
        function addInput0() {
        if (fields != 10) {
            var currentText = 'text0' + fields;
            document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
            fields += 1;
        } else {
            document.getElementById(currentText).innerHTML += "<br />Only 10 authors allowed.";
            document.ajaxform0.add0.disabled=true;
        }
    }
    </script>

    <div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div>
    <input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
    <input type="hidden" name="count" value="5">
    <input type="hidden" name="id" value="45">
    <input type="submit">
    </form>

Answer 1

Hi I have modified your code for html and JavaScript.

<form id="ajaxform0">
<input type="text" value="Logan" name="authorname[]">
    <input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
    <input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
    <input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
    <input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
    <input type="hidden" value="129" name="authorid[]"><br><br>
<script language="javascript">
fields = 5;
    function addInput0() {
    if (fields != 10) {
        var currentText = 'text0' + fields;
        document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
        fields += 1;
    } else {
        var myout = "Only 10 authors allowed.";
        document.getElementById("stat").innerHTML = myout;
    }
}
</script>

<div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div><div id="stat"></div>
<input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
<input type="hidden" name="count" value="5">
<input type="hidden" name="id" value="45">
<input type="submit">

Check it and let me know, if it is solved.

Answer 2

Try assigning that concatenated string to a JS variable first, then calling the function:

if (fields != 10) {

    var currentText = 'text<?php echo $i; ?>' + fields;
    document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
    fields += 1;
} else {
    document.getElementById(currentText).innerHTML += "<br />Only 10 authors allowed.";
    document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
}

Answer 3

I need to add the $i to the fields variable in the javascript. With multiple files it was doing multiples of the same variable...i works.