счётчик при вводе символов в Input

при старте в features-elem__symbols-number показываеться максимальное количество введеных символов(например 30), при вводе начинает считать сколько можно еще ввести. Проблема в том счетчик не работает если использовать клавиши delete и Detect backspace, а также если ввести 30 символов то будет показываться -1 вместо 0 html:

<div class="features-elem__field symbol-input__counter">
   <input type="text" class="features-elem__input symbol-counter__input">
   <div class="features-elem__symbols">
       <span class="features-elem__symbols-arrow">&#60;</span>
       <span class="features-elem__symbols-number">30</span>
       <span class="features-elem__symbols-text">sym</span>
   </div>
</div>

js:

function inputSymbolCounter() {
        if ($(".symbol-input__counter").length) {
            var maxValueInputInit = document.querySelector(".symbol-input__counter .features-elem__symbols-number").textContent;
            var maxValueInit = parseFloat(maxValueInputInit);
            document.querySelector(".symbol-input__counter .symbol-counter__input").oninput = function(e) {
                var maxValueInput = document.querySelector(".symbol-input__counter .features-elem__symbols-number").textContent;
                var maxValue = parseFloat(maxValueInput);
                if (e.target.value.length > maxValueInit) {
                    return false;
                    e.preventDefault();
                } else {
                    document.querySelector(".symbol-input__counter .features-elem__symbols-number").innerHTML = maxValueInit - e.target.value.length;
                }
            };
        }
    };
    inputSymbolCounter();