diff --git a/client/scripts/index.js b/client/scripts/index.js
index 7646ec5..a75d979 100755
--- a/client/scripts/index.js
+++ b/client/scripts/index.js
@@ -8,10 +8,15 @@ var Hello = React.createClass({
     this.refs.container.success("hi! Now" + new Date(), "///title\\\\\\");
   },
 
+  clearAlert () {
+    this.refs.container.clear();
+  },
+
   render: function() {
     return <div>
       <ToastContainer toastMessageClass={ToastMessage.jQuery} ref="container" className="toast-top-right" />
       <p onClick={this.addAlert}>Hello {this.props.name}</p>
+      <button onClick={this.clearAlert}>CLEAR</button>
     </div>;
   }
 });
diff --git a/src/ToastContainer.js b/src/ToastContainer.js
index 51fc993..6c86f85 100644
--- a/src/ToastContainer.js
+++ b/src/ToastContainer.js
@@ -25,6 +25,14 @@ module.exports = React.createClass({
     this._notify(this.props.toastType.warning, message, title, optionsOverride);
   },
 
+  clear () {
+    var {refs} = this,
+        key;
+    for (key in refs) {
+      refs[key].hideToast(false);
+    }
+  },
+
   getDefaultProps () {
     return {
       toastType: {
@@ -44,6 +52,7 @@ module.exports = React.createClass({
   getInitialState () {
     return {
       toasts: [],
+      toastId: 0,
       previousMessage: null
     };
   },
@@ -55,13 +64,14 @@ module.exports = React.createClass({
         return;
       }
     }
-    var key = Date.now();
+    var key = state.toastId++;
     var newToast = update(optionsOverride || {}, {
       $merge: {
-        key,
         type,
         title,
         message,
+        key,
+        ref: `toasts__${ key }`,
         handleOnClick: this._handleToastOnClick,
         handleRemove: this._handleToastRemove
       }
@@ -70,8 +80,8 @@ module.exports = React.createClass({
     toastOperation[(props.newestOnTop ? "$unshift" : "$push")] = [newToast];
 
     var newState = update(state, {
-      previousMessage: { $set: message },
-      toasts: toastOperation
+      toasts: toastOperation,
+      previousMessage: { $set: message }
     });
     this.setState(newState);
   },
diff --git a/src/ToastMessage/jQueryMixin.js b/src/ToastMessage/jQueryMixin.js
index d1c7f6a..51cce09 100644
--- a/src/ToastMessage/jQueryMixin.js
+++ b/src/ToastMessage/jQueryMixin.js
@@ -69,10 +69,10 @@ module.exports = {
   },
 
   hideToast (override) {
-    if (this.state.intervalId == null && !override) return;
+    var {state, props} = this;
+    if (state.isHiding || (state.intervalId == null && !override)) return;
     this.setState({isHiding: true});
 
-    var {props} = this;
     this._get$Node()[props.hideMethod]({
       duration: props.hideDuration,
       easing: props.hideEasing,