Как создать функцию отмены в JQuery, чтобы отменить вызов функции

Question

По сути, это создатель авто Div. Чтобы заставить его работать, щелкните правой кнопкой мыши, чтобы создать div из одного из вариантов.

Я хочу иметь возможность отменить последнюю (или, возможно, более одной в обратном порядке) функцию, которая вызывается из контекстного меню, выбрав последний параметр «Отменить последнюю функцию».

Вот код:

<section class="top">
  <button class="button">New Frame</button>
</section>

<!--Bottom Section of Page that contains the main div.-->
<section class="bottom-section">
  <div class="bottom">
    <!--Custom Context Menu that will be called when right clicked.-->
    <ul class="custom-menu">
      <li data-action="horz-equal">Horizontal: Divide equally</li>
      <li data-action="horz-here">Horizontal: Divide here</li>
      <li data-action="vert-equal">Vertical: Divide equally</li>
      <li data-action="vert-here">Vertical: Divide here</li>
      <li data-action="last-action">Undo Last Action</li>

    </ul> 
  </div>
</section>

<script>

  // Button triggers the bottom section to change background color and makes the main div visible.
  $(".button").click(function() {
    $(".bottom-section").css("background-color", "#FFFFFF");
    /*$(".bottom").css("visibility", "visible");*/
  });

  // Trigger action when the contexmenu is shown
  $(".bottom").bind("contextmenu", function(event) {
    window.activeElement = event.target;
    // prevents default context menu
    event.preventDefault();

    /* stores y and x mouse coordinates globally so they can be accessed 
by other functions.*/

    window.y = event.pageY;
    window.x = event.pageX;

    // Show contextmenu
    $(".custom-menu")
      .finish()
      .toggle(100)
      // shows it where mouse is located
      .css({
        top: y + "px",
        left: x + "px"
      });
  });

  // If the document is clicked somewhere 
  $(document).bind("mousedown", function(e) {
    // And if the clicked element is not the menu
    if (!$(e.target).parents(".custom-menu").length > 0) {
      // The menu will hide
      $(".custom-menu").hide(100);
    }
  });

  // If the context menu element is clicked
  $(".custom-menu li").click(function() {
    // There are multiple options
    switch ($(this).attr("data-action")) {
      //A case for each action will be executed by the specified function.
      case "horz-equal":
        horzEqual();
        break;
      case "horz-here":
        horzHere();
        break;
      case "vert-equal":
        vertEqual();
        break;
      case "vert-here":
        vertHere();
        break;
      case "last-action":
        lastAction();
        break;
    }
    // function definition environment for each of the above cases / menu options.
    function horzEqual() {
      // This is the active element of the right click (needed before the menu option was selected).
      let el = window.activeElement;
      // Creates 2 div's with full width, making it equal.  Outline is there to make border visible.

      let c = "<div class='beba' style='width:100%; height:50%; outline: 1px solid red;'>"

      let div1 = $(el).append(c);
      let div2 = $(el).append(c);

    }


    function horzHere() {
      // This is the active element of the right click (needed before the menu option was selected).
      let el = window.activeElement;
      // distance of the selected div from the top
      let elY = el.getBoundingClientRect().top;
      // height of the element to be divided
      let elHeight = el.getBoundingClientRect().height;
      // distance of the right click from the elements border. In other words it's relative position from within the element.
      let newY = y - elY;
      //calculates the height percentage of the top div
      let cal = (newY / elHeight * 100);
      //rounds the number out
      let top = Math.round(cal);
      //calculates the percentage of the top div
      let bottom = (100 - top);
      //concatenates percentage sign
      top += "%";
      bottom += "%"
      //finally creates the 2 divs and adds the attributes to get the job done. Outline shows the border.
      $(el).append("<div style='width:100%; height:" + top + "; outline: 1px solid red;'>");
      $(el).append("<div style='width:100%; height:" + bottom + "; outline: 1px solid red;'>");
    }

    // divides the div in half by left and right
    function vertEqual() {
      // This is the active element of the right click (needed before the menu option was selected).
      let el = window.activeElement;
      // Creates 2 div's with full height, equal width. Outline is there to make border visible. Inline block makes sure the div's don't overflow.
      $(el).append("<div style='width:50%; height:100%; display:inline-block; outline: 1px solid red;'>");
      $(el).append("<div style='width:50%; height:100%; display:inline-block; outline: 1px solid red;'>");
    }

    // divides the div in half by left and right where mouse was right clicked.

    function vertHere() {
      // This is the active element of the right click (needed before the menu option was selected).
      let el = window.activeElement;
      // distance of the selected div from the left side 
      let elX = el.getBoundingClientRect().left;
      // gets width of the element to be divided
      let elWidth = el.getBoundingClientRect().width;
      // distance of the right click from the elements border. In other words it's relative position from within the element.
      let newX = x - elX;
      //calculates the width percentage of the left div
      let cal = (newX / elWidth * 100);
      //rounds the number out
      let left = Math.round(cal);
      //calculates the percentage of the right div
      let right = (100 - left);
      //concatenates percentage sign
      left += "%";
      right += "%"
      //finally creates the 2 divs and adds the attributes to get the job done. Outline shows the border. Inline block makes sure the div's don't overflow.
      $(el).append("<div style='width:" + left + "; height:100%; display:inline-block; outline: 1px solid red;'>");
      $(el).append("<div style='width:" + right + "; height:100%; display:inline-block; outline: 1px solid red;'>");
    }

    function lastAction() {


    }

    // Hides context menu AFTER action was triggered
    $(".custom-menu").hide(100);
  });

</script>

Спасибо.