PHP, HTML JS MySQL Dynamic Drop-Downs

Question

I have a form that I have everything working and submitting except... User should select departments and the 4 Defect fields should populate with the Defects that match the Department. Departments and Defect 4 works. If I remove 4 then 3 works, remove 4&3 and 2 works and so on. I think it is losing the listindex but I am lost. I have changed the various variable to be unique in each Defect also and same results. Im just having brain freeze, syntax something I am missing something. Below is the code for Dept, Defect 1 and 2.

    <strong>Department Name:</strong>
        <select name=Department_Nam class="required-entry" id="Department_Nam" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
            <option value="">Select Department</option>
            <?php if ($resultdep->num_rows > 0) {
              while($row = mysqli_fetch_assoc($resultdep)) {?>
                <option value="<?php echo $row['Department_Nam']; ?>"> <?php echo $row['Department_Nam']; ?></option>

          <?php        }
             } ?>

        </select>
    </div>

    <strong>Defect:</strong><br>
        <script>
            document.write('<select name="DefectDescrip" id="DefectDescrip"> <option value="">Please select defect</option></select>')
        </script>
        <noscript>
            <select name="DefectDescrip" id="DefectDescrip">
                <option value="">Please select defect</option>
            </select>
        </noscript>
    </div>
    <script>
        var rowFrameworkResultInJs =<?php echo json_encode($rowFrameworkResult);?>;
        function dynamicdropdown(listindex)
        {
            document.getElementById("DefectDescrip").length = 0;
            document.getElementById("DefectDescrip").options[0]=new Option("Please select defect","");
            if (listindex) {
                var lookup = {};
                var j = 1;
                for (var i = 0, len = rowFrameworkResultInJs.length; i < len; i++) {
                    if (rowFrameworkResultInJs[i].Reject_Code_Department == listindex) {
                        document.getElementById("DefectDescrip").options[j]=new Option(rowFrameworkResultInJs[i].Reject_Code_Descrip,rowFrameworkResultInJs[i].Reject_Code_Descrip);
                        j = j+1;
                    }
                }
            }
         return true;   
        }
   </script>


   <br><strong>Defect 2:</strong><br>
        <script>
            document.write('<select name="DefectDescrip2" id="DefectDescrip2"><option value="">Please select defect</option></select>')
        </script>
        <noscript>
            <select name="DefectDescrip2" id="DefectDescrip2">
                <option value="">Please select defect</option>
            </select>
        </noscript>
    </div>
    <script>
        var rowFrameworkResultInJs =<?php echo json_encode($rowFrameworkResult);?>;
        function dynamicdropdown(listindex)
        {
            document.getElementById("DefectDescrip2").length = 0;
            document.getElementById("DefectDescrip2").options[0]=new Option("Please select defect","");
            if (listindex) {
                var lookup = {};
                var j = 1;
                for (var i = 0, len = rowFrameworkResultInJs.length; i < len; i++) {
                    if (rowFrameworkResultInJs[i].Reject_Code_Department == listindex) {
                        document.getElementById("DefectDescrip2").options[j]=new Option(rowFrameworkResultInJs[i].Reject_Code_Descrip,rowFrameworkResultInJs[i].Reject_Code_Descrip);
                        j = j+1;
                    }
                }
            }

            return true;
        }
   </script>

Answer 1

Fixed it. I was calling one function in Department, needed to add individual function calls and change the called function to match. Wow, head cramp.