JSFiddle - React, Tailwind, and code Playground

HTML

<input id='b1' type='button' value='go' onclick='alert("0");'/>

<br>

<input id='index' type='number' min='0' />
<input id='b2' type='button' value='add listener at this index'/>

JavaScript

// Uses different ways to add the event handlers
    $("#b1").on('click',function (){alert('1');});
    $("#b1").bind('click',function (){alert('2');});
    $(document).on('click', '#b1', function (){alert('3');});
    
    var selector = '#b1';
    var insertedFunction = function(){alert('heyooo!');};    
    var $target = $(selector);
    var oldOnClickFunction = new Function($target.attr('onclick'));
        
    var targetEvents = [oldOnClickFunction];
    var boundEvents = $._data($target.get(0), "events");
    boundEvents && boundEvents.click && $.each(boundEvents.click, function(i, val){
      targetEvents.push(val.handler);
    });

    var $targets = $(document).add($target.parents());   
    $targets.each(function(){
      var eventObj = $._data(this, "events");
      eventObj && eventObj.click && $.each(eventObj.click, function(i, val){
        if($target.filter(val.selector).length) {
          targetEvents.push(val.handler);
        } 
      });
    });
        
    newOnClick = function(event){
      event.stopPropagation();
      $.each(targetEvents, function(i, handler){
        handler(event);
      });     
    };
    
    $("#b2").on('click', function(){
      $target.attr('onclick', 'newOnClick(event)');
      var removeAt = targetEvents.indexOf(insertedFunction);
      if (removeAt != -1) {
        targetEvents.splice(removeAt,1);  
      }
      targetEvents.splice(parseInt($('#index').val()), 0, insertedFunction);
      $target.off('click');
    });