Set mouse focus and move cursor to end of input using javascript

This question has been asked in different formats, but I cannot get any answer to work in my case.

I am using vanilla javascript to set focus on a specific input field so that when someone clicks on an element on the navbar, it sets focus on the input field and moves the cursor there. I have tried using .focus() method but that does not apply here.

To provide some context, I am using Django and implementing template inheritance

app.js

var newlsetter = document.querySelector('#newsletter');
newlsetter.addEventListener("click", activateNewsletterInput);
function activateNewsletterInput() {
  document.querySelector('#sg_email').focus();
}

sidebar.html

...
<li class="nav-item close_side" id="newsletter">
  <a class="nav-link" href="#footer">Newsletter</a>
</li>
...

footer.html

...
<form id="sg-widget" data-token="" onsubmit="return false;">
  <label class="text-white mb-3">Receive our newsletter:</label>
  <div class="input-group">
    <input id="sg_email" type="email" name="sg_email" class="form-control pl-2 w-md-100 mb-sm-2" placeholder="E-mail" required="required"> 
    <button type="submit" id="sg-submit-btn" class="btn px-4 w-md-100">
      Subscribe
    </button>
  </div>
  <div class="sg-response mt-2" id="sg-response"></div>
</form>
...