Junior dev working on a website and got thrown by how to reference this element

<div class="form-group">
                  <label for="@id-name">Name</label>
                  <input id="@id-name" class="form-control" name="name" required type="text" max-length="70" value="{{$userBot->name ?? null}}">
</div>

I was adding the maximum length cap and wanted to create an alert when this limit was reached. I was expecting the solution to look something like this

$( '#@id-name' ).on('input', function() {
                                    if ($(this).val().length>70) {
                                        alert('you have reached the maximum characters for bot name');
                                    }
                                });

but, not entirely to my surprise, this doesn't seem to be able to get the element to reference, and I tried some variations between jquery and javascript and different "" positionings to no success. I know the site uses php, my assumption is this is a part of that language (php isn't my area of expertise, my role is mostly ux integrations like this alert)

I'm curious how more experienced developers would create a reference to an element with an @ in the id.