magento2 – in the success message of the catalog page after hidden it will not show up again

so I use the d code to modify messages.phtml and messages.js to hide the error or success messages after a certain time, but if I want to add more than 1 product message on the catalog page, it will not appear again, since they are configured to show: none, here is the /developer/theme/Magento_Theme/web/js/view/messages.js

define([
    'jquery',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'underscore',
    'jquery/jquery-storageapi'
], function ($, component, customerData, _) {
& # 39; strict use & # 39 ;;

return Component.extend ({
predetermined values: {
Cookies messages: [],
messages: [],
isHidden: false,
selector: & # 39; .page.messages .messages & # 39 ;,
listen out: {
isHidden: & # 39; onHiddenChange & # 39;
}
}

/ **
* Extends the Component object by storing observable messages.
* /
initialize: function () {
this._super ();

this.cookieMessages = $ .cookieStorage.get (& # 39; magician messages & # 39;);
this.messages = customerData.get (& # 39; messages & # 39;). extend ({
disposableCustomerData: & # 39; messages & # 39;
});

// Force to clean obsolete messages
if (! _. isEmpty (this.messages (). messages)) {
customerData.set (& # 39; messages & # 39 ;, {});
}

$ .cookieStorage.set (& # 39; magician messages & # 39 ;, & # 39; & # 39;);

}

initObservable: function () {
this._super ()
.observe (& # 39; isHidden & # 39;);

return this
}

isVisible: function () {
returns this.isHidden (! _. isEmpty (this.messages (). messages) ||! _. isEmpty (this.cookieMessages));
}

removeAll: function () {
$ (self.selector) .hide ();
}

onHiddenChange: function (isHidden) {
var self = this;

// Hide message block if necessary
if (is hidden) {
setTimeout (function () {
$ (self.selector) .hide ();
}, 5000);
}
}
});
});