Javascript Delay Timer Only Applies To Last Changed Textarea

I have multiple textareas on a web page like below. What happens is when you type into one of the textareas, there is a delay which triggers on keyup and then takes the text in the textarea and sends it to an AJAX call to save it. The ajax call and saving is working fine.

The issue is if I type in more than one textarea before the delay trigger runs, only the last textarea I type in is sent to an ajax call.

Currently what is happening:

1. Type in textarea 1
2. Type in textarea 2
3. Only changes in textarea 2 are sent to ajax call

What should happen:

1. Type in textarea 1 and changes trigger call ajax call to save changes
2. Type in textarea 2 and changes trigger call ajax call to save changes

Typing into textarea 2 should not affect the saving of textarea 1.

HTML

<div data-mid="123">
    <div class="box" data-id="1">
        <textarea class="note" placeholder="...write something">123</textarea>
    </div>
    <div class="box" data-id="2">
        <textarea class="note" placeholder="...write something">1234</textarea>
    </div>
    <div class="box" data-id="3">
        <textarea class="note" placeholder="...write something">12345</textarea>
    </div>
    <div class="box" data-id="4">
        <textarea class="note" placeholder="...write something">123456</textarea>
    </div>
</div>

Javascript

function delay(callback, ms) {
    var timer = 0;
    
    return function() {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            callback.apply(context, args);
        }, ms || 0);
    };
}

function save(rootNode)
{
    var note = rootNode.val();
    
    ajaxCall(null, 2, note, false);
}

$('.box').on('keyup', 'textarea', delay(function(event) {
    save($(this));
}, saveDelay));