Python eel exposed function not getting called from JS file as expected

Question

I have made a web page in HTML and backend in python, for the connectivity between the front end and back end, I have used eel via javascript.

This is my javascript file:

function myFunction(){
    let x = document.getElementById("file")
    let y = eel.function1(x);
    document.getElementById("label").innerHTML = y 
    document.getElementById("div").innerHTML = "Processed successfully";
}

and this is my python file content:

import eel
eel.init('web')

@eel.expose
def function1(data):
    print("done")
    return data+2;
    
eel.start('index.html')

In my python file, I have successfully defined a function that is decorated with @eel.expose and from my javascript file, I am calling the same function. In my html file, I have added the javascript, and the function in my js file gets triggered when a button is clicked. Everything is wokring fine, just the python function that should have added 2 to the integer entered by the user is not even getting called. Pre req: I have already installed eel in my machine using the command: pip install eel

I took reference from this: https://dev.to/yash_makan/4-ways-to-create-modern-gui-in-python-in-easiest-way-possible-5e0e#:~:text=4%20ways%20to%20create%20modern%20GUI%20in%20python,3%203.%20Pywebview%20...%204%204.%20PyQT5%20

eel should have let my js file call the python finction and paas the value entered by the user and python function upon being called, should have added 2 to it and then returned the value to js file and then js file should have updated the elelemnt with id: div with this value. But somehow the function just Stucks when the line in js file calls the eel.python function. Please find the image from interactive view of visual studio: