I have a stale element reference but no Idea how to get around it in my case

Question

So I am having a problem. I am trying to automate part of our software testing with Python Selenium, however now I have fallen into a bit of a problem. I have the code below.

After the selection of a drop down (country_list_element = Select(driver.find_element(By.ID, 'countryLst'))) to South Africa, then there is an ajax overlay. After this, I need to select another drop down, (id_type_element = Select(driver.find_element(By.ID, 'c6'))) to 'Passport Number'. Now this exists in HTML, however when I run this, I get an error

Message: stale element reference: element is not attached to the page document

I have the XPATH of the ajax overlay and stored it into a variable "LOADING_ELEMENT_XPATH" and am trying to wait for it to go away, and then carry on.

What am I doing wrong here? I just need to be able to select the drop down value.

I attached the HTML at the bottom

import os
import time
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import Select
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.wait import WebDriverWait

### Variables ###
PATH = 'C:\Selenium_Drivers\chromedriver.exe'
ENROLMENT_URL = **hidden for privacy**
SHORT_TIMEOUT  = 5   # give enough time for the loading element to appear
LONG_TIMEOUT = 30  # give enough time for loading to finish
LOADING_ELEMENT_XPATH = '/html/body/div[7]'

first_name = 'PyLenium'
last_name = 'Test1'
cell_number = '0790000000'
email_address = f'{first_name.casefold()}.{last_name.casefold()}@gmail.com'.replace(' ', '')
country_list = '1'
# id_number = 
passport_number = f'{first_name.casefold()}.{last_name.casefold()}!'.replace(' ', '')
password = 'Password1!'


driver = webdriver.Chrome(PATH)

driver.get(ENROLMENT_URL)                               # Navigate to the requested URL
driver.maximize_window()
first_name_element = driver.find_element(By.ID, 'c1')
first_name_element.send_keys(first_name)
last_name_element = driver.find_element(By.ID, 'c2')
last_name_element.send_keys(last_name)
cell_number_element = driver.find_element(By.ID, 'cell')
cell_number_element.send_keys(cell_number)
email_address_element = driver.find_element(By.ID, 'c3')
email_address_element.send_keys(email_address)
country_list_element = Select(driver.find_element(By.ID, 'countryLst'))
country_list_element.select_by_visible_text('South Africa')
id_type_element = Select(driver.find_element(By.ID, 'c6'))

WebDriverWait(driver, 30).until(EC.invisibility_of_element_located((By.XPATH,LOADING_ELEMENT_XPATH)))

id_type_element.select_by_visible_text('Passport Number')

time.sleep(10)

HTML of the page is below. The troublesome drop down menu is the one with 'id="c6"'. Note about this:

• when one selects the drop down value of "South Africa" in the 'id="countryLst"' drop down, the 'id="c6"' drop down dynamically changes, however the HTML that I added is after South Africa is selected.
• this drop down ('id="c6"') is the one that has a "stale element"
• What I want to be doing, is select countryLst as South Africa, and then select c6 as Passport Number

<div class="col-md-4">
    <div class="input-group" style="margin-bottom: 1em;">
        <span class="input-group-addon "><i class="fa fa-globe" aria-hidden="true" style="font-size: 21px;"></i></span>
</div>
    <span id="countryLst_ctl">
        <select name="countryLst" id="countryLst" class="listbox fullWidth" size="1">
            <option value="0">Country of Origin</option>
            <option value="1">South Africa</option>
            <option value="2">United Arab Emirates</option>
        </select>
    </span>                        
</div>
<div class="col-md-4">
    <div class="input-group" style="margin-bottom: 1em;">
        <span class="input-group-addon">
            <img src="/assets/images/id-card.png" style="width: 18px;">
        </span>
        <span id="c6_ctl">
            <select name="c6" id="c6" class="listbox fullWidth" size="1">
                <option value="0">--Select ID Type--</option>
                <option value="1">RSA ID Number</option>
                <option value="2">Passport Number</option>
            </select>
        </span>                      
    </div>
</div>