How can I get the current text box the user is typing in (Chrome Extension)

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <input type="text" name="text" id="input1" placeholder="Click me">
    <input type="text" name="text" id="input2" placeholder="Click me">
    <input type="text" name="text" id="input3" placeholder="Click me">
    <br><br><br>
    <div id="display"></div>
</body>
<script>




    function inputs(){
        for(let i = 0; i < document.querySelectorAll('input').length; i++){
            document.querySelectorAll('input')[i].addEventListener('click', ()=>{
                //Get the DOM element of whatever input user clicks on
                var currentInput = document.querySelectorAll('input')[i];
                console.log(currentInput);

                //Just for example purposes 
                document.getElementById('display').innerText = 'You clicked on input...' + (i+1);
            });
        }
    }
    inputs();
</script>
</html>