Server receives more than one time from Javascript callback

Hello,

I have a lazyloading table, then when i click on one row, i get a new customer javascript component with a saveButton.
Then i have a problem about the javascript callback during the button click:

var saveButton = document.querySelector('#saveRegion');
        saveButton.addEventListener("click", function(e) {
            if (saveRegions()) {
                setTimeout(function() {
                    console.log('Debug the localstorage regions: '
                            + localStorage.regions);
                    var o = {
                        record : []
                    };
                    o.record.push({
                        "recordId" : recordId
                    })
                    o.record.push({
                        "regions" : localStorage.regions
                    })
                    com.ihm.component.chart
                            .saveregion(o);
                }, 3000);
            }
            dialog.dialog("close");

And server side:

JavaScript.getCurrent().addFunction(jsSaveRegion, new JavaScriptFunction()
        {
            private static final long    serialVersionUID    = 4119186268144783717L;
            @Override
            public void call(JsonArray arguments)
            {
                LOGGER.debug("call from client side");
            }
        });

The server received 2 or 3 times the same command when i click on the save button, can you tell me why?
It is related to the lazyloading or refresh?
Thank you very much
 

Maybe i find the reason, i create the customer javascript component when i click on the new row, and the old one is always there i think. So:
Select the first row --> click on the save button --> server receive 1request
Select the second row --> click on the save button --> server receive 2 requests
Select the third row --> click on the save button --> server receive 3 requests
Select the fourth row --> click on the save button --> server receive 4 requests
etc...

But, i have already done this in the customer js file, maybe it doesn't work, always the same problem:

var localStorageSpace = function() {
    var allStrings = '';
    for ( var key in window.localStorage) {
        if (window.localStorage.hasOwnProperty(key)) {
            allStrings += window.localStorage[key];
        }
    }
    return allStrings ? 3 + ((allStrings.length * 16) / (8 * 1024)) + ' KB'
            : 'Empty (0 KB)';
};
var storageIsFull = function() {
    var size = localStorageSpace(); // old size
    console.log('Debug Local storage');
    console.log(size);
    // try to add data
    var er;
    try {
        window.localStorage.setItem("test-size", "1");
    } catch (er) {
    }

    // check if data added
    var isFull = (size === localStorageSpace());
    window.localStorage.removeItem("test-size");

    return isFull;
}
$(function() {
    if (videoPlayer) {
        console.log('Debug destroy the var videoPlayer');
        if (storageIsFull())
            console.log('Debug Storage full');
        else
            console.log('Debug storage not full');
        // videoPlayer= null;
        // localStorage.removeItem("regions");
        localStorage.clear();
        // window.videoPlayer.WebAudio.destroy();
        // window.videoPlayer.backend.destroy();
        // window.videoPlayer.Regions.clear();
        // window.videoPlayer.destroy();
        videoPlayer= null;
    }
}());
com_ihm_component_videoPlayer= function() {

    if (videoPlayer) {
        console.log('Debug destroy the var videoPlayer');
        if (storageIsFull())
            console.log('Debug Storage full');
        else
            console.log('Debug storage not full');
        videoPlayer= null;
        console.log('Debug videoPlayer destory');
***
}

Here is the html content for the js component:

<div id="dialog-form" title="Modify Marks">
         <form role="form" name="edit" style="opacity: 0; transition: opacity 300ms linear; margin: 0px 0px;">
             <div class="form-group">
                 <label for="start">Start</label>
                 <input class="form-control" id="start" name="start" />
             </div>
    
             <div class="form-group">
                 <label for="end">End</label>
                 <input class="form-control" id="end" name="end" />
             </div>
    
             <div class="form-group">
                 <label for="note">Note</label>
                 <textarea id="note" class="form-control" rows="2" name="note" maxlength="64"></textarea>
             </div>
             <div id="saveRegion">
             <button type="submit" class="btn btn-success btn-block">Save</button>
             </div>
             <center><i>or</i></center>
             <div id="deleteRegion">
                 <button type="button" class="btn btn-danger btn-block" data-action="delete-region">Delete</button>
             </div>
             
         </form>
    </div>

Should i remove this div for everytime when i click on the new table row?
And how? in the function "onStateChange"?