Is there any tool to help organize multiple click events?

Within my system there are many events, such as click , change etc. Is there a tool that can help me organize these events?

$("#btn-save-sidebar").on("click",function(){});
$(document.body).on('click', '.remove-component' ,function(e){


    var $thisComponente = $(this).closest(".component");
    var $compContainer = $thisComponente.parent();

    if (e.altKey){
        $thisComponente.remove();
    }

    //mensagem de confirmação para deletar
    else {
        var q = confirm("Você tem certeza que quer remover o título?");
        if (q == true) {
            $thisComponente.remove();
        }
        //$thisComponente.remove();
    }

    var noOfComponents;
    var components = $compContainer.find(".component");

    noOfComponents = components.length;


    if(noOfComponents === 0){
        $compContainer.addClass("container-empty")
    }

});

$(document.body).on("click",".btnadd-or-remove",function(){
    _this = $(this);
    var thisElement = _this.closest(".panel.form");
    if (_this.val() === "+") {

        var cloneDiv = thisElement.clone();
        cloneDiv.insertAfter(thisElement);
        setSortablesAndDraggables();
    } else if (_this.val() === "x") {
        thisElement.remove();
    }
});

$("#btn-bla-bla").on("click",function(){});
...
//assim por diante
$("#btn-n").on("click",function(){});

<div class="panel ">
    <div class="panel-heading">
        <div class="row">
            <div class="col-md-2">
                <div class="text-center">
                    <label>
                        <div class="checkbox">
                            <input type="checkbox" style="display: none;" class="chk-hide-block" name="chk-hide-block"><i class="fa fa-eye fa-2x"></i>
                            Mostra Questão? <span class="text-esconder text-info"> <strong  style="font-size: 20px;">Sim</strong> </span>
                        </div>
                    </label>
                </div>
            </div>
            <div class="col-md-2">
                <div class="text-center">
                    <label>
                        <div class="checkbox"  >
                            <input type="checkbox" style="display: none;" class="chk-is-obrig" name="chk-is-obrig" checked>
                            <i class="fa fa-check-square-o fa-2x"></i> Questão obrigatória?
                            <span class="text-obrig text-danger"> <strong  style="font-size: 20px;">Sim</strong></span>
                        </div>
                    </label>
                </div>
            </div>
            <div class="col-md-2">
                <button class="text-center  alert alert-warning btn-condicional" data-toggle="modal" data-target="#myModal" data-condicional-json="">
                    <i class="fa fa-check-square-o fa-2x"></i> Condicional
                </button>
            </div>
            <div class="col-md-4">
                <div class="pull-right">
                    <span class="btn-group">
                        <button class="btnadd-or-remove btn btn-primary btn-sm form-control" value="+"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
                    </span>
                    <span class="btn-group">
                        <button class="btnadd-or-remove btn btn-danger btn-sm form-control" value="x"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </button>
                    </span>
                    <span class="btn-group mover-bloco-main">
                        <div class="btn btn-default"><i class=" fa fa-arrows"></i> [Mover]</div>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <ul class="nav">
            <li class="col-md-5 dropdown">
                <select class="info-tipo-perg form-control">

                </select>
            </li>
            <li class="col-md-1 text-center">
                <span class="btn-group">
                    <button class="btn-config btn btn-default btn-lg form-control"><i class="fa fa-cog"></i> </button>
                </span>
            </li>
        </ul>
        <ul class="nav">
            <li class="col-md-1"></li>
            <li class="col-md-5">
                <div class="text-center  alert alert-info">
                    <label>
                        <div class="checkbox">
                            <input type="checkbox" class="info-has-justifica" checked/>
                        </div>
                    </label>
                </div>
            </li>
            <li class="col-md-5">
                <div class="col-md-6">
                    <textarea class="info-header form-control" style="resize: none;" placeholder="Header"></textarea>
                </div>
                <div class="col-md-6"><label><input type="checkbox" class="info-is-ordered"> Ordenar</label></div>
            </li>
        </ul>
    </div>
</div>

The code is just expanding and more and more difficult to organize.