javascript – When the function is called again, the previous values ​​of the declared variable are still used.

Question:

This time there was a question to var. How to force a variable to overwrite its value with each new function call? All function code is attached.

function tablecell(){
    var st = $(this).attr('id');
    console.log(st);
    if($(this).is('.disabled')){ 
    }
    else{
        $('.questionBg').css({'display':'flex'});
        function answer(){
            if ($(this).is('#true')){
                $(this).css({'background':'#83c849'}).css({'color':'#fff'});
                $('.answer').addClass('disabled');
                $('.disabled').off('click', answer);
                $('.teamSelection').css({'display':'flex'});
                $('.selectTeam').click(function(){
                    $(close);
                    alert(st);
                    $("#"+st).addClass('disabled');
                    if($(this).is('.selectTeam1')){
                        $("#"+st).children('.question').css({'display':'none'});
                        $("#"+st).children('.team1').css({'display':'block'});
                    }
                    else{
                        $("#"+st).children('.question').css({'display':'none'});
                        $("#"+st).children('.team2').css({'display':'block'});
                    }
                });
            }
            else{
                $(this).css({'background':'#e03a3a'}).css({'color':'#fff'});
                $('.answer').addClass('disabled');
                $('.disabled').off('click', answer);
                setTimeout(close, 1000);
            }
        }
    }
    $('.answer').click(answer);
};

The call is made from outside:

$(document).ready(function(){
    $('.tablecell').click(tablecell);
});

I have a feeling that the function does not simply end, but the new value is displayed in the console when called again. However, alert re-displays the previous values ​​each time. What to do – I do not understand. Write in array?

    <div class="questionBg">
        <div class="questionBlock">
            <div class="questionText">
                <img src="image/question.png">
                    Какого цвета этот блок?
            </div>
            <ul class="answersContainer">
                Варианты ответа:
                <li class="answer">Синий</li>
                <li class="answer">Красный</li>
                <li class="answer">Серый</li>
                <li class="answer" id="true">Белый</li>
            </ul>
            <div class="teamSelection">
                <div class="selectTeam selectTeam1">
                    <img src="image/team1.png">
                </div>
                <div class="selectTeam selectTeam2">
                    <img src="image/team2.png">
                </div>
            </div>
            <div class="close">
                <img src="icons/cross.png">
            </div>
        </div>
    </div>
    <section>
        <div class="start">
            Начать!
        </div>
        <div class="table">
            <div class="tablecell" id="1">  
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="2">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="3">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="4">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="5">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="6">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="7">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="8">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">  
            </div>
            <div class="tablecell" id="9">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
        </div>
    </section>

Answer:

What to do

Do not assign event handlers inside other event handlers.

Each time the tablecell function is executed, you add a new click event handler to all elements with class "answer". By clicking on such an element, all accumulated handlers are executed.

(function(){
  var st;

  function answer(){
    ...
  }

  function tablecell(){
    st = $(this).attr('id');
    console.log(st);
    if($(this).is('.disabled')){ 
    } else {
      $('.questionBg').css({'display':'flex'});
    }
  }

  $(document).on('click', '.tablecell', tablecell);
  $(document).on('click', '.answer', answer);
})();