Селектор jquery не работает, если элемент содержит точку в имени тега

Я только что начал использовать jquery в первый раз, поэтому я не уверен, что я м делаю правильно. То, что я пытаюсь сделать, очень простое, у меня есть сценарий, который добавляет водяной знак css в текстовые поля при загрузке в представлении MVC.

Чтобы выбрать элемент, я делаю следующее:

jQuery(document).ready(function(){$('#Department.DeptName').addWatermark('input-watermarked', 'test');});

Затем в моем скрипте для добавления класса водяных знаков css происходит сбой при выполнении оператора this.val (). Length.

jQuery.fn.toggleWatermark = function(watermarkedClass, watermarkText) {
if (this.hasClass(watermarkedClass)) {
    this.removeWatermark(watermarkedClass);
}
else if (this.val().length == 0) {
    this.addClass(watermarkedClass);
    this.val(watermarkText);
}

}

Скрипт отлично работает, если идентификатор элемента - «DepartmentDeptName», как если бы селектор не работал, если идентификатор элемента содержит точку внутри. Кто-нибудь знает, почему и как решить эту проблему?