HTML textbox.value不在JavaScript函数中更新

I have a PHP project containing textboxes to visualize STACK data structure concept; as seen in the screenshot below:

enter image description here

I am passing PHP values to JavaScript function and adding value only to the index number where there is no value (i.e Top of stack)

Below is the code:

 <html>
 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Data Structure Visualization</title>
    <link rel=stylesheet href=StackStyleSheet.css>
    <script type="text/javascript">
        function addElement($id, $value)
        {
            var id = $id;
            var value = $value;
            //correct id and value is passed here.

            var textbox = document.getElementById(id);

            //this LOC does not execute and returns to the php code
            textbox.value = value;
        }
    </script>

    <body>
    <?php include 'header.php'; ?>

    <form method="POST" action="">

    <div id ="container">
        <div id="top">
            <h3>STACK (ARRAY IMPLEMENTATION)</h3>
        </div> 

        <div id="bottom">
            <input id="inputBox" type="text" name="inputNumber" value="">
            <button id="pushButton"  type="submit"  class="button button1" name = "PUSH">Push</button>
            <button id="popButton"   type="submit"  class="button button2" name = "POP">Pop</button>
            <button id="clearButton" type="submit"  class="button button3" name = "CLEAR">Clear Stack</button>
        </div>

        <div id="operation">
            <input type="text" name="5E" value="" class="operation1 obutton6">
            <input type="text" name="4E" value="" class="operation1 obutton5">
            <input type="text" name="3E" value="" class="operation1 obutton4">
            <input type="text" name="2E" value="" class="operation1 obutton3">
            <input type="text" name="1E" value="" class="operation1 obutton2">
            <input type="text" name="0E" value="" class="operation1 obutton1">
        </div>

    </div>  

    </form>

    <?php
    include 'footer.php';

    if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['PUSH']))
    {   
        $val0E = (int)$_POST['0E'];
        $val1E = (int)$_POST['1E'];
        $val2E = (int)$_POST['2E'];
        $val3E = (int)$_POST['3E'];
        $val4E = (int)$_POST['4E'];
        $val5E = (int)$_POST['5E'];

        //creating an associative array to store/add/delete values in the index locations

        $elementsindex = array("0E"=>$val0E ,"1E"=>$val1E,"2E"=>$val2E, "3E"=>$val3E, "4E"=>$val4E, "5E"=>$val5E);

            foreach ($elementsindex as $key => $value) 
            {
                if(($elementsindex[$key])==null) 
                {
                    //value copied from textbox
                    $id = $key;
                    $value = $_POST['inputNumber'];

                    //value pushed in
                    $elementsindex[$key] = $value; //saves value against element index

                    //value reflected on screen box
                    echo '<script type="text/javascript">';
                    echo 'addElement("'.$id.'", "'.$value.'");';
                    echo '</script>';
                    break;
                }
                else if(($elementsindex[$key])!=null)
                {
                    continue;
                }
            }
        }
    }
  </body>
</html>

In the foreach loop, if the value at bottom index i.e index = 0E is null/zero, then a new value is added to it, after which we exit from the loop using break;

But, at the JavaScript function addElement(), the following code does not execute and immediately returns and no value is filled in the textbox.

  var textbox = document.getElementById(id);

  //this LOC does not execute and returns to the php code
  textbox.value = value;

Where is the code wrong?