Всплывающее окно сообщения и BD

Текст сообщения:
  <input name="toast-text" type="text" value="Текст сообщения...">
  Цвет:
  <select class="form-control" name="toast-color">
    <option selected value="#ffffff">#ffffff</option>
    <option value="#17a2b8">#17a2b8</option>
    <option value="#ffc107">#ffc107</option>
    <option value="#dc3545">#dc3545</option>
    <option value="#28a745">#28a745</option>
  </select>
  <br>
  <input name="autohide" type="checkbox"> автоматически скрывать
  <br>
  Закрывать сообщение через (миллисекунд):
  <input name="toast-delay" type="text" value="5000">
  <button id="addToast" type="button">Добавить toast</button>
 
  <script src="js/jquery-3.5.0.min.js"></script>
  <script>
    'use strict';
 
    var Toast = function (element, config) {
      var
        _this = this,
        _element = element,
        _config = {
          autohide: true,
          delay: 5000
        };
      for (var prop in config) {
        _config[prop] = config[prop];
      }
      Object.defineProperty(this, 'element', {
        get: function () {
          return _element;
        }
      });
      Object.defineProperty(this, 'config', {
        get: function () {
          return _config;
        }
      });
      // setListeners
      $(_element).on('click', '.toast__close', function () {
        _this.hide();
      })
    };
 
    Toast.prototype = {
      show: function () {
        var _this = this;
        $(this.element).addClass('toast_show');
        if (this.config.autohide) {
          setTimeout(function () {
            _this.hide();
          }, this.config.delay)
        }
      },
      hide: function () {
        $(this.element).removeClass('toast_show');
        $(this.element).trigger('hidden.toast');
      }
    };
 
    Toast.create = function (text, color) {
      return ($('<div>', { 'class': 'toast', style: 'background-color: rgba(' + parseInt(color.substr(1, 2), 16) + ',' + parseInt(color.substr(3, 2), 16) + ',' + parseInt(color.substr(5, 2), 16) + ',0.5)' }).text(text))
        .append(($('<button>', { type: 'button', 'class': 'toast__close' })).html('&times;'));
    };
 
    Toast.add = function (params) {
      var config = {
        text: 'Текст сообщения...',
        color: '#ffffff',
        autohide: true,
        delay: 5000
      };
      if (params !== undefined) {
        for (var item in params) {
          config[item] = params[item];
        }
      }
      if (!$('.toasts').length) {
        $('body').append($('<div>', { 'class': 'toasts', style: 'position: fixed; top: 15px; right: 15px; width: 250px;' }));
      }
      $('.toasts').append(Toast.create(config.text, config.color));
      var toasts = $('.toast');
      var toast = new Toast(toasts[toasts.length - 1], { autohide: config.autohide, delay: config.delay });
      toast.show();
      return toast;
    };
    /* удалять при скрытии всплывающей подсказки её из DOM */
    /*$(document).on('hidden.toast', '.toast', function () {
      $(this).remove();
    });*/
    $('#addToast').click(function () {
      /*
        Параметры функции add:
        header (строка) - название заголовка
        body (строка) - текст сообщения
        color (строка) - цвет в формате #rrggbb
        autohide (булево) - скрывать ли автоматически всплывающее сообщение
        delay (число) - количество миллисекунд после которых сообщение будет автоматически скрыто
      */
      Toast.add({
        header: $('[name="toast-header"]').val(),
        body: $('[name="toast-body"]').val(),
        color: $('[name="toast-color"] option:selected').val(),
        autohide: $('[name="autohide"]').prop('checked'),
        delay: parseInt($('[name="toast-delay"]').val())
      });
    });
  </script>