Adding +1 to a div with other button

Question

I have a button with a 10 second timer. When the timer runs, the button is disabled for 10 seconds. After 10 seconds the button is enabled again and you get +$25 in your account (Div). Run Code snippet to see:

 $('#btn').prop('disabled',true);
    startCountDown();

    function getCounter(){
        return  parseInt($('#counter').html());
    }
    function setCounter(count) {
        $('#counter').html(count);
    }

    $("#btn").click(function() {
        setCounter(getCounter()+25);
        $('#btn').prop('disabled',true);
        startCountDown();
    });

    function startCountDown() {
        var minutes = 0,
            seconds = 10;
        $("#countdown").html(minutes + ":" + seconds);
        var count = setInterval(function() {
            if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
                $("#countdown").html("Collect");
                clearInterval(count);
                $('#btn').prop('disabled',false);
            } else {
                $("#countdown").html(minutes + ":" + seconds);
                seconds--;
                if (seconds < 10) seconds = "0" + seconds;
            }
        }, 1000);
    }

 #total {
        display: inline-flex;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="total">
    <div id="counter">0</div>
    <div id="money">$</div>
</div><br>
<button id="btn">
    <span id="countdown">Collect</span>
</button>

Now I wanted to add a button that you can click all the time and every time you click on the button +1$ should be added to your account. When I made the button, everything worked without problems until I noticed that the button with the timer no longer worked. Here is the code I used for everything in total:

// add one button start

const addOneButton = document.querySelector('.addOneButton');
    addOneButton.onclick = Counter;
    const clicks = document.querySelector('#counter');
    clicks.id = document.querySelector('counter');

    var a = 0;

    function Counter() {
        a += 1;
        clicks.innerHTML = a;
    }

// Timer Button Part start

    $('#btn').prop('disabled',true);
    startCountDown();

    function getCounter(){
        return  parseInt($('#counter').html());
    }
    function setCounter(count) {
        $('#counter').html(count);
    }

    $("#btn").click(function() {
        setCounter(getCounter()+25);
        $('#btn').prop('disabled',true);
        startCountDown();
    });

    function startCountDown() {
        var minutes = 0,
            seconds = 10;
        $("#countdown").html(minutes + ":" + seconds);
        var count = setInterval(function() {
            if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
                $("#countdown").html("Collect");
                clearInterval(count);
                $('#btn').prop('disabled',false);
            } else {
                $("#countdown").html(minutes + ":" + seconds);
                seconds--;
                if (seconds < 10) seconds = "0" + seconds;
            }
        }, 1000);
    }

#total {
        display: inline-flex;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="total">
    <div id="counter">0</div>
    <div id="money">$</div>
</div><br>
<button id="btn">
    <span id="countdown">Collect</span>
</button>

<button class="addOneButton">Add One!</button>

Do you have any idea what I did wrong?

Answer 1

Maybe I misunderstood your question, but why not just add a similar method of adding + 1, as well as +25. Like this:

$(".addOneButton").click(function() {
   setCounter(getCounter() + 1);
}); 

$('#btn').prop('disabled',true);
    startCountDown();

    function getCounter(){
        return  parseInt($('#counter').html());
    }
    function setCounter(count) {
        $('#counter').html(count);
    }

    $("#btn").click(function() {
        setCounter(getCounter()+25);
        $('#btn').prop('disabled',true);
        startCountDown();
    });
    
     $(".addOneButton").click(function() {
       setCounter(getCounter() + 1);
     }); 

    function startCountDown() {
        var minutes = 0,
            seconds = 10;
        $("#countdown").html(minutes + ":" + seconds);
        var count = setInterval(function() {
            if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
                $("#countdown").html("Collect");
                clearInterval(count);
                $('#btn').prop('disabled',false);
            } else {
                $("#countdown").html(minutes + ":" + seconds);
                seconds--;
                if (seconds < 10) seconds = "0" + seconds;
            }
        }, 1000);
    }

#total {
        display: inline-flex;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="total">
    <div id="counter">0</div>
    <div id="money">$</div>
</div><br>
<button id="btn">
    <span id="countdown">Collect</span>
</button>
<button class="addOneButton">Add One!</button>