How to select element after DOM reload in webdriverio in JAVASCRIPT

Question

I've been tasked to perform the followings using Mocha and webdriverio:

1. [done] Open https://cloud.google.com/

2. [done] By clicking the search button on the portal at the top of the page, enter in the search field "Google Cloud Platform Pricing Calculator"

3. [done] Start the search by clicking the search button.

4. [done] In the search results, click "Google Cloud Platform Pricing Calculator" and go to the calculator page.

5. [done] Activate the COMPUTE ENGINE section at the top of the page //selected by default

6. [In Progress] Fill in the form with the following data:

   • Number of instances: 4 //element id #input_77

   • Instance type: n1-standard-8 (vCPUs: 8, RAM: 30 GB)

   • Select Add GPUs

     • Number of GPUs: 1

     • GPU type: NVIDIA Tesla V100

   • Local SSD: 2x375 Gb

   • Datacenter location: Frankfurt (europe-west3)

   • Commited usage: 1 Year

I've tried to select the element (number of instances) both by id:

const numOfInstances = await $('#input_77')

and XPath:

const numOfInstances = await $('//*[@id="input_77"]')

But I've got error message: element ("#input_77") still not existing after 15000ms

The whole code block here:

 it('Choose the number instances', async () => {
        const numOfInstances = await $('#input_77')
        //await numOfInstances.waitForExist() //tried this method, too. but still the same error
        await numOfInstances.setValue(4)
    })

I guess the problem is not with the way of selecting the element, but finding it after DOM refreshed due to search in step 3 and 4.

The whole code is here: https://pastebin.com/79ghTbHC

I appreciate your help!