Optimizing a nested list with folding options

My question is based on this topic, but I would like to add a few functions.

The current code looks like that:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  $('ol ol').hide();

  $('li').click(function() {
    $(this).children('ol').toggle();
  });
});

<!-- language: lang-css -->

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  cursor: default;
}

ol {
  counter-reset: item;
}

li {
  display: block;
}

li:before {
  content: counters(item, ".") " ";
  /* content: counters(item, ".", decimal-leading-zero) " "; */
  counter-increment: item;
}

li:has(ol):before {
  float: left;
  /* margin-bottom: 5px; */
}

ol ol {
  overflow: hidden;
}

.active {
  color: green;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

<!-- end snippet -->

The following is needed:

1. If you click Coffee or Tea, the the subordinate menu items
   should expand, but with a space from the left starting just below
   the word and not the digit, the way it was solved here.
2. It should only be possible to open one menu item at a time.
3. The menu item clicked last should toggle the .active class.
4. If there are more than 9 menu items, all menu items should start
   with a 0 in front of the respective digit so that everything is
   still on the fitting position.

Here is an example how it can look like:

Does someone know how to do that? I would be very grateful for help.

I would toggle a class and consider all the logic inside the CSS like below

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
$('li').click(function() {
$('ol.active').removeClass("active");
$(this).children('ol').addClass("active");
});
});

<!-- language: lang-css -->

* {
margin: 0;
padding: 0;
font-family: Arial;
cursor: default;
}
ol {
counter-reset: item;
}
li {
display: block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
/* add leading 0 if more than 10*/
li:first-child:nth-last-child(n + 10):before,
li:first-child:nth-last-child(n + 10) ~ li:before{
content: counters(item, ".", decimal-leading-zero) " ";
}
/* select li that has "ol" */
li:has(ol.active):before {
float: left;
margin-bottom: 5px; /* small value */
}
ol ol {
overflow: hidden;
display: none;
}
ol ol.active {
color: green;
display: block;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li>Coffee
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>Tea
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>Milk</li>
<li>Cool</li>
</ol>
<hr>
<ol>
<li>Coffee
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>Tea
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>Milk</li>
<li>Cool</li>
<li>Cool</li>
<li>Cool</li>
<li>Cool</li>
<li>Cool</li>
<li>Cool</li>
<li>Cool</li>
</ol>

<!-- end snippet -->