Why does stopPropagation method block events attached to the same element?

Here is what I’m trying to do:

1. Attach two events to the same object (and have them both active)
2. Prevent propagating event up in DOM hierachy (event attached to parent element should not fire)

I’m facing a problem with point 1. I’ve attached two events, but only one is being fired.

I’ve reproduced my case on jsfiddle: https://jsfiddle.net/bavdnthu/

$('.main').on('click', '.testedDiv', function() {
  alert('div clicked #1');
  e.stopPropagation();
});

$('.main').on('click', '.testedDiv', function() {
  alert('div clicked #2');
  e.stopPropagation();
});

$('.main').on('click', 'span', function() {
  alert('span clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="main">
  <div class="testedDiv">
    DIV
    <span>
      Span
    </span>
  <div>
</div>

Here is what I see: only ‘div clicked #1’ alert is being fired. I expect to see also the second one: ‘div clicked #2’.

Judging from description of stopPropagation on w3schools:

Propagation means bubbling up to parent elements or capturing down to child elements.

At the same time stopImmediatePropagation() exists which according to MDN:

If several listeners are attached to the same element for the same event type, they are called in the order in which they were added. If stopImmediatePropagation() is invoked during one such call, no remaining listeners will be called, either on that element or any other element.

So my code behaves as if I used stopImmediatePropagation(), but I did not. What am I missing?