Почему при оборачивании кода в $(document).on('click', function ( { }); он ломается?
каждый раз при document.onclick вызывается вот это всё, и добавляются новые event listener-ы на спаны

Такая обертка нужна для ajax
каким образом?
Я ничего не понял(в том числе, для чего микс из нативного js и jquery).

Но так разобраться проще:
snippet
Но опять же, я ничего не понял.