Back button like breadcrumbs in jquery

I am displaying the menu on the left side. As of now, there is no issue with the menu.
Now I am working on the back button. Once the user clicks on the Demo1 -> Demo 1.1 then it will show the Demo 1.1.1, Demo 1.1.2 etc. So I am planning to show back button at the top like

//back
Demo1->Demo 1.1

//dropdown
Demo 1.1.1
Demo 1.1.2
Demo 1.1.3
Demo 1.1.4

Note: My menu is completely dynamic, I don’t want to add the static value.

$('.menu-item-has-children .sub-menu').css({
  'left': '-320px'
});

$('.menu-item-has-children > a').click(function() {
  //alert('hello');

  var positionMenu = $(this).parent().attr('id');
  //console.log(positionMenu); 
  $('.menu-item-has-children[id=' + positionMenu + '] > .sub-menu').css({
    'left': '0px'
  });

});
ul {
  padding-left: 0;
}

.secondary {
  z-index: 99;
  background: #f8f8f8;
  -webkit-box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
  box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
  -webkit-transition: left 0.2s ease, width 0.2s ease;
  transition: left 0.2s ease, width 0.2s ease;
  border-right: 1px solid #eaedf1;
  position: fixed;
  top: 0;
  height: 100%;
  padding: 12px;
  width: 320px;
}

.menu li {
  padding-bottom: 10px;
  padding-left: 23px;
  list-style: none;
}

.menu-item-has-children>a {
  position: relative;
  display: block;
}

.menu-item-has-children .sub-menu {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  background: #f8f8f8;
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: left .3s;
  z-index: 10;
}

.menu-item-has-children>a::after {
  display: inline-block;
  vertical-align: middle;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "f054";
  position: absolute;
  right: 05px;
  top: 0px;
  font-size: 12px;
}
<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>

<div class="secondary">
  <ul id="menu-inner-page-menu" class="menu">
    <li>Home</li>
    <li id="menu-item-204" class="menu-item-has-children"><a href="#">Demo1</a>
      <ul class="sub-menu">
        <li id="menu-item-304" class="menu-item-has-children"><a href="#">Demo 1.1</a>
          <ul class="sub-menu">
            <li><a href="">Demo 1.1.1</a></li>
            <li><a href="">Demo 1.1.2</a></li>
            <li><a href="">Demo 1.1.2</a></li>
          </ul>

        </li>
        <li id="menu-item-305"><a href="">Demo 1.2</a></li>
        <li id="menu-item-306"><a href="">Demo 1.3</a></li>
        <li id="menu-item-307"><a href="">Demo 1.4</a></li>
      </ul>
    </li>

    <li id="menu-item-205" class="menu-item-has-children"><a href="#">Demo2</a>
      <ul class="sub-menu">
        <li id="menu-item-315"><a href="">Demo 2.1</a></li>
        <li id="menu-item-316"><a href="">Demo 2.2</a></li>
      </ul>
    </li>

  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>