input type=”number” addClass on increase removeClass on decrease

In an online game, students are asked “How many 12-year-olds already have (…)” and have to choose how many of 25 people’s icons (4%) they color in. This is actually kind of a range input, but I thought it could be done easily with an input type=”number” too.

I’ve already got it working to some extent. Arrow up or mouse up adds the necessary class, but the remove class doesn’t work yet. When I enter a number, the people’s icon with that number gets the class, but all icons with a lower id should also get the class.

You can find the live example here. The code I’m using:

HTML:

<svg id="manneke1" class="manneke" (…) /></svg>
(…)
<svg id="manneke25" class="manneke" /></svg>
<input type="number" id="inputMannekes" class="form-control text-center" name="inputMannekes" value="0" min="0" max="25"/>

CSS:

.manneke {
  fill:none;
  stroke:#004f75;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:11.49px;
}

.gevuld {
  fill:#f5c1bc;
  stroke: #e66557;
}

Javascript:

$("#inputMannekes").change(function () {
    if (this.getAttribute('value') === this.value) {
        $(this).data('lastvalue', this.value);
        console.log(this.value);
    } else {
        if (this.value > $(this).data('lastvalue')) {
            $("#manneke"+$(this).val()).addClass("gevuld");
        } else {
            $("#manneke"+$(this).val()).removeClass("gevuld");
        }
    }
}).change();