Desarrollador júnior que trabaja en un sitio web y no sabe cómo hacer referencia a este elemento

 <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>

Estaba agregando el límite de longitud máxima y quería crear una alerta cuando se alcanzara este límite. Esperaba que la solución fuera algo como esto.

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

pero, no del todo para mi sorpresa, esto no parece ser capaz de hacer referencia al elemento, y probé algunas variaciones entre jquery y javascript y diferentes posiciones "" sin éxito. Sé que el sitio usa php, supongo que esto es parte de ese idioma (php no es mi área de especialización, mi función es principalmente integraciones de ux como esta alerta)

Tengo curiosidad por saber cómo los desarrolladores más experimentados crearían una referencia a un elemento con una @ en la identificación.