JSFiddle - React, Tailwind, and code Playground

HTML

<button class="up">+</button>
    <button class="down">-</button>

    <div>Some text</div>
    <div>Some more text</div>
    <div>Even more text</div>

JavaScript

$('button.up').on('click',function() {
        changeFontSize('up',38,'div');
    });

    $('button.down').on('click',function() {
        changeFontSize('down',16,'div');
    });


    //using so many parameters for the sake of being able to potentially use this function on multiple elements with different min and max sizes
    function changeFontSize(x,lim,el) {
        var direction = x,
            limit = lim,
            currentSize = parseInt($(el).css('font-size'));

            if(direction === "up") {
                if(currentSize<limit) {
                     $(el).css({
                         'font-size':(currentSize+6)+'px'
                     })
                }
            } else if (direction === "down") {
                if(currentSize>limit) {
                     $(el).css({
                         'font-size':(currentSize-6)+'px'
                     }) 
                }
            }

    }