Uncaught ReferenceError: FillTboxes is not defined at HTMLButtonElement.onclick

This javascript allows me to call modal and other functionality for my table, I cannot retrieve the stored data in the table because of this error "Uncaught ReferenceError".

This is my code for javascript:

 const db = getFirestore(app);
    
          submitData.addEventListener('click', (e) => {
            var firstName = document.getElementById('fn').value;  
            var lastName = document.getElementById('ln').value;  
            var referralCode = document.getElementById('referralCode').value;
            var email = document.getElementById('email').value;
            var mobileNumber = document.getElementById('mobileNumber').value;
            var username = document.getElementById('un').value;
            var password = document.getElementById('pass1').value;
            var rePassword = document.getElementById('pass2').value;  
    
            addDoc(collection(db, "passengers"), {
                  email: email,
                  first_name: firstName,
                  last_name: lastName,
                  password: password,
                  username: username
                });
            document.getElementById("formReg").reset();    
            alert('Yehey!');
         });   
          
         var tbody = document.getElementById('tbody1');
         var passNo = 0;
         var passList = [];
    
         function  AddItemsToTable(firstName, lastName, username, email, password ){
                
                var trow = document.createElement('tr');
                var td1 = document.createElement('td');
                var td2 = document.createElement('td');
                var td3 = document.createElement('td');
                var td4 = document.createElement('td');
                var td5 = document.createElement('td');
                var td6 = document.createElement('td');
    
                passList.push([firstName, lastName, username, email, password]);
    
                td1.innerHTML = ++passNo;
                td2.innerHTML = firstName;
                td3.innerHTML = lastName;
                td4.innerHTML = email;
                td5.innerHTML = username;
                td6.innerHTML = password;
    
               
    
                var actionDiv = document.createElement("div");
                actionDiv.innerHTML = '<button data-toggle="modal" data-target="#modalTable" class="actionBtn3" type="button" id="editBtn" onclick="FillTboxes('+passNo+')"><img src="img/edit.png"  style="height: 15px;"></button>';
                actionDiv.innerHTML += '<button data-toggle="modal" data-target="#modalTable" class="actionBtn" type="button" onclick="FillTboxes('+passNo+')"><img src="img/eye.png" style="height: 15px;"></button>';
                actionDiv.innerHTML += '<button class="actionBtn2" type="button" onclick="FillTboxes('+passNo+')"><img src="img/trash.png" style="height: 15px;"></button> ';
                
    
                trow.appendChild(td1);
                trow.appendChild(td2);
                trow.appendChild(td3);
                trow.appendChild(td4);
                trow.appendChild(td5);
                trow.appendChild(td6);
                trow.appendChild(actionDiv);
    
                tbody.appendChild(trow);
            }
    
            function AddAllItemsToTheTable(PassengersDocsList){
                tbody.innerHTML="";
                passNo = 0;
                PassengersDocsList.forEach(element =>{
                    AddItemsToTable( element.firstname, element.lastname, element.username, element.email,  element.password);
                });      
    
            }
    
            async function GetAllDataOnce(){
                const querySnapshot = await getDocs (collection(db,"passengers"));
    
                var passengers = [];
    
                querySnapshot.forEach(doc =>{
                    passengers.push(doc.data());
                });
    
                AddAllItemsToTheTable(passengers);
            }
    
            async function GetAllDataRealtime(){
                const dbRef = collection(db,"passengers");
    
                onSnapshot(dbRef,(querySnapshot)=>{
    
                    var passengers = [];
    
                    querySnapshot.forEach(doc =>{
                        passengers.push(doc.data());
                    });
                    AddAllItemsToTheTable(passengers);
                });
    
            }
    
            window.onload = GetAllDataRealtime;

This function must call the stored data ang store it into my modals so that I can edit them out.

        var modFirstName = document.getElementById('lname');
        var modLastName = document.getElementById('fname');
        var modEmail = document.getElementById('emailTable');
        var modUsername = document.getElementById('uname');
        var modPassword = document.getElementById('password1');

         function FillTboxes(index){
             --index;
            modFirstName.value = passList[index][0];
            modLastName.value = passList[index][1];
            modEmail.value = passList[index][2];
            modUsername.value = passList[index][3];
            modPassword.value = passList[index][4];
        }  

</script>