Why would the same getElementById code work for one section but not the second section?

Question

I have 2 fields (machine & plant) that need to be autogenerated from the selection the user picks in the input field. 'Machine' has an array set up for the drop-down choices while 'plant' has hardcoded selections for the drop-down. Plant is working and auto generates to the correct spot on the label. Machine does not. The same segment of code is being used to populate the fields and I can't find why one works while the other doesn't.

I used the same method (getElementById) for both sections. I tried removing the working section to see if something was duplicated with no change. I tried swapping the names and id's to see if it might be pointed in the wrong direction also with no change. I verified the CSS was correct by swapping the two fields and got 'plant' in the machine section without an issue. See the entire code here: github link

<!-- in the head portion-->
<script type="text/JavaScript">
        var machine = ['','WH','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20',
        '21','22','23','24','25','26','27','28','29','30','31','32','33','34'];
        for (i=0; i < 99; i++) {
            var opt = Math.floor(Math.random() * 99);
            machine.push(opt);
        }
        
        $(function() {
            var options = '';
            for (var i = 0; i < machine.length; i++) {
                options += '<option value="' + machine[i] + '">' + machine[i] + '</option>';
            }
            $('#machine').html(options);
        });
        </script>

<!-- in the body portion-->
<fieldset class="input">
            <label for="item-number">item number: </label>
            <input id="order-number" name="order-number" type="text" required />
            <label for="machine">machine
                <select id="machine" name="machine" onchange="myFunction2()">
                    <option value="">(select type)</option>
                </select>
            </label>
            <label for="plant">PLANT
                <select id="plant" name="plant" onchange="myFunction1()">
                    <option value="">(select plant)</option>
                    <option value="1">SP</option>
                    <option value="2">CT</option>
                    <option value="3">PF</option>
                    <option value="4">RN</option>
                    <option value="5">MI</option>
                    <option value="6">KY</option>
                </select>
            </label>
            <label for="copies">copies: </label>
            <input id="copies" name="copies" type="text" required />
            <button class="glow-on-hover" type="submit" onclick="SubmitEvent" id="submitBtn">SUBMIT</button>
        </fieldset>

<!-- lower in the body portion-->
<div class="plt">
                <script>
                    const plt1 = document.getElementById("plant").value
                    function myFunction1() {
                        var mylist = document.getElementById("plant");
                        document.getElementById("disp").value = plant.options[plant.selectedIndex].text;
                    }
                </script>
                <p><input type="text" id="disp" size="1">-</p>
            </div>
            <div class="mch">
                <script>
                    const mch1 = document.getElementById("machine").value
                    function myFunction2() {
                        var mylist2 = document.getElementById("machine");
                        document.getElementById("disp2").value = machine.options[machine.selectedIndex].text;
                    }
                </script>

Answer 1

TYVM to those that helped and especially those that took the time to break this down enough I could understand the relationship of specific pieces. This was the end solution:

<!-- This auto populates the specific machine used on the label -->
                <script>
                    const mch1 = document.getElementById("mylist2").value
                    function myFunction2() {
                        var mylist2 = document.getElementById("machine");
                        document.getElementById("disp2").value = mylist2.options[mylist2.selectedIndex].text;
                    }
                </script>
                <p><input type="text" id="disp2" size="1"></p>
            </div>