Auto Focus Search on click

Im having a hard time getting autofocus to work

Classname for Toggle is nav-link-search
image
image

Here is version 1




Here is version 2

<!-- Start Search Auto Focus V2 -->
<script>
$('.nav-link-search').click(function () {
    $('.search-input').focus();
}); 
</script>
<!-- End Search Auto Focus -->

Preview io link
https://awwsome.webflow.io/

Project Share Link:
https://preview.webflow.com/preview/awwsome?utm_medium=preview_link&utm_source=designer&utm_content=awwsome&preview=92150e0161ca5427fafd75a162fa00f9&mode=preview

Code that depends on jQuery needs to be loaded in the before body close area. Won’t work in an embed. A quick check of the console shows the issue.

Thanks @webdev

That appears to do the trick!
image

@webdev

I have an unusual case of Focus on second click. I tested various combinations of .class and #div-id matches on both paarent search div and search asset, with the same result. It only aito focus onsecond click. I’m lost as how how to resolve this.
image
image
image


Preview Link: https://deepdiv-iteration-v3.webflow.io/

Share Link:
https://preview.webflow.com/preview/deepdiv-iteration-v3?utm_medium=preview_link&utm_source=designer&utm_content=deepdiv-iteration-v3&preview=6edc520bc283dc73051bcda87ae58b08&mode=preview