JSFiddle - React, Tailwind, and code Playground

HTML

<div id="notice" >
    fade out
</div>
<span id="counter" > 10
</span>
<br>
<input type="text" id="noticetxt" />

JavaScript

$(document).ready(function() {
var i =10;
var counter;
var fade_out = function() {
  $("#notice").fadeOut().empty();
    clearInterval(counter);
};


function count() {  $("#counter").html(i--); }


$('#noticetxt').blur( function () { // don't forget # to select by id
    var id = $(this).data('id'); // Get the id-data-attribute
    var val = $(this).val();
    
    $.ajax({
        type: "POST",
        url: "test",
        data: {
            notes: val, // value of the textarea we are hooking the blur-event to
            itemId: id // Id of the item stored on the data-id
        },
        success: function (msg) {
            $('#notice').html(val); //dummy use as there test server
            setTimeout(fade_out, 10000);
           counter = setInterval(function(){ count(); },900);
        },
        error : function (e) { alert("error:" + e);}
        
    });
});
    
});