How to clean button click source code written in javascript and jquery?

When a specific button is clicked, a function is executed.

If “active” is added to the button’s class, the button’s color changes and the active state is displayed to the user.

And each function has an end event.

Disables the button on the function’s end event.

This source code works fine, but it doesn’t seem like a good way to do it.

Is there a cleaner and better way?

Is it possible to implement this using object oriented programming?

$("#btn1").on("click", function(e){
    $("#btn1").addClass("active");
    $("#btn2").removeClass("active");
    $("#btn3").removeClass("active");
    $("#btn4").removeClass("active");
    $("#btn5").removeClass("active");
    
    btn1Function();
});

$("#btn2").on("click", function(e){
    $("#btn2").addClass("active");
    $("#btn1").removeClass("active");
    $("#btn3").removeClass("active");
    $("#btn4").removeClass("active");
    $("#btn5").removeClass("active");
    
    btn2Function();
});

$("#btn3").on("click", function(e){
    $("#btn3).addClass("active");
    $("#btn1").removeClass("active");
    $("#btn2").removeClass("active");
    $("#btn4").removeClass("active");
    $("#btn5").removeClass("active");

    btn3Function();
});

$("#btn4").on("click", function(e){
    $("#btn4").addClass("active");  
    $("#btn1").removeClass("active");
    $("#btn2").removeClass("active");
    $("#btn3).removeClass("active");    
    $("#btn5").removeClass("active");
    
    btn4Function();
});

$("#btn5").on("click", function(e){
    $("#btn5").addClass("active");
    $("#btn1").removeClass("active");
    $("#btn2").removeClass("active");
    $("#btn3").removeClass("active");
    $("#btn4").removeClass("active");
    
    btn5Function();
});

function btn1Function()
{
    ... 
}

function btn2Function()
{
    ... 
}

function btn3Function()
{
    ... 
}

function btn4Function()
{
    ... 
}

function btn5Function()
{
    ... 
}


btn1FunctionEndEvent.on("end", function(){
    $("#btn1").removeClass("active");
    ...
});

btn2FunctionEndEvent.on("end", function(){
    $("#btn2").removeClass("active");
    ...
});

btn3FunctionEndEvent.on("end", function(){
    $("#btn3").removeClass("active");
    ...
});

btn4FunctionEndEvent.on("end", function(){
    $("#btn4").removeClass("active");
    ...
});

btn5FunctionEndEvent.on("end", function(){
    $("#btn5").removeClass("active");
    ...
});

Answer

Demo Page

    // get attribute start with "btn"
    $("[id^=btn]").each(function () {
        $(this).click(function () {
            //remove all occurrence(/g) if its not a digit(^d)
            var id = this.id.replace(/[^d]/g, '');

            //:button would selects all button elements and elements of type button.
            $(':button').removeClass('active');

            $("#btn" + id).addClass("active");

            //when() function allow you to execute function in sequence.
            //eval will allow you to run functions in local scope
            $.when(eval("btn" + id + "Function()")).then(eval("btn" + id + "FunctionEndEvent()"));
        });
    });

Sources:

:button Selector

Attribute Starts With Selector [name^=”value”]

jQuery.when()