JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="keuzeLint">
    <h3>Lint Tekst</h3>
    <p>Lint1:
        <span class="floatlinttextRight">U heeft nog
            <span class="lintTekst1"></span>
            tekens over
        </span>
    </p>
    <input type="text" style="width: 640px;" maxlength="60" name="b" class="charcountback" data-charcountback=".lintTekst1"> <br/>
    <p>Lint2:
        <span class="floatlinttextRight">U heeft nog
            <span class="lintTekst2"></span>
            tekens over
        </span>
    </p>
    <input type="text" style="width: 640px;" maxlength="60" name="a" class="charcountback" data-charcountback=".lintTekst2">
</div>

JavaScript

$.fn.charcountback = function() {
    return this.each(function() {
        var $this = $(this);
        $($this.attr("data-charcountback")).text($this.attr('maxlength'));
        $this.on('keyup', function () {
            var counter = $this.attr("data-charcountback");
            var maxlength = $this.attr('maxlength');
            var value = $this.val();
            if(value.length > 0) {
                $(counter).text(maxlength - $this.val().length);
            } else {
                $(counter).text(maxlength);
            }
        });
    });
};
$('.charcountback').charcountback();