I have a problem with downloading and displaying the value, when set to "rigidly" maxLenght - everything works fine, but when I want the script to download the value myself, I have a problem.

The script is supposed to get the value maxlenght = "" from each <input> and after typing by the user it will print out how many characters are left.

var maxLen = document.getElementsByClassName("handlerWorld").maxLength;

function countChar(jqObj) {
    var len = jqObj.val().length;
    var diff = maxLen - len;

    if (len > maxLen) {
        len = maxLen;
        diff = 0;
    }
    jqObj.val(jqObj.val().substr(0, len)).prev('label').find('span.chars-twenty').text(diff);
}

$(document).ready(function () {
    $("[class*='handlerWorld']").keyup(function () {
        countChar($(this));
    }).each(function () {
        countChar($(this));
    });
});

My HTML:

<div class="form-group">
          <label for="nameIput">Nazwa firmy <span>Remaining: <span class="chars-twenty"></span></label>
          <input type="text" id="name" maxlength="140" name="name" class="form-control handlerWorld">
        </div>
        <div class="form-group">
          <label for="urlInput">URL <span>Remaining: <span class="chars-twenty"></span></label>
          <input type="text" id="url" name="url" maxlength="100" class="form-control handlerWorld">
          
        </div>

Edit:

Now I would like it to show the number of characters, e.g .:

10/140

quantity written / quantity in the value "maxlenght"

$("#add-category").find('span.maxchar').text(maxLen);

They work but not as they should.