Creating a Likert Scale questionnaire, needs to be buttons and in JavaScript

The issue I’m having is, when I click on the first question it functions as it should. It is when I add additional questions, my button clicks affect each line. Complete noob to this don’t know what to do to get this to work. please see the code below, I need to figure out how to call the button selected to change color and hold its position when selected.

    <style>
        .btndefault.active {
            background-color: green;
            color: white;
        }

        .btndefault {
            color: #8c8c8c;
            font-weight: 700;
            background-color: #f4efeb;
            border: none;
            letter-spacing: 2px;
            outline: none;
        }
          .btndefault2.active2 {
            background-color: green;
            color: white;
        }

        .btndefault2 {
            color: #8c8c8c;
            font-weight: 700;
            background-color: #f4efeb;
            border: none;
            letter-spacing: 2px;
            outline: none;
        }

        </style>
        <div class="btn-toolbar" role="toolbar" aria-label="...">
        <div>
            <label>1. The objectives of this Training course were discussed 
sufficiently.</label>
            <br />
            <br />
        </div>
        <div class="btn-group" id="Buttons1" role="group" style="text-align: left;" 
aria-label="..." aria-orientation="horizontal">
            <a class="btn btn-link disabled" style="margin-right: 75px;">Strongly 
Disagree</a>
            <button type="button" id="btnAgreeToDisagre1" style="margin-right: 90px;" 
class="btndefault active">1</button>
            <button type="button" id="btnAgreeToDisagre2" style="margin-right: 90px;" 
class="btndefault">2</button>
            <button type="button" id="btnAgreeToDisagre3" style="margin-right: 90px;" 
class="btndefault">3</button>
            <button type="button" id="btnAgreeToDisagre4" style="margin-right: 90px;" 
class="btndefault">4</button>
            <button type="button" id="btnAgreeToDisagre5" style="margin-right: 90px;" 
class="btndefault">5</button>
            <a class="btn btn-link disabled">Strongly Agree</a>
        </div>
    </div>
    <br />
    <br />
    <div class="btn-toolbar" role="toolbar" aria-label="...">
        <div>
            <label>2.The training course material was delivered in an appropriate 
manner for me to learn the content.</label>
            <br />
            <br />
        </div>
        <div class="btn-group" id="Buttons2" role="group" style="text-align: left;" 
aria-label="..." aria-orientation="horizontal">
            <a class="btn btn-link disabled" style="margin-right: 75px;">Strongly 
Disagree</a>
            <button type="button" id="btnAgreeToDisagre6" style="margin-right: 90px;" 
class="btndefault2 active2">1</button>
            <button type="button" id="btnAgreeToDisagre7" style="margin-right: 90px;" 
class="btndefault2">2</button>
            <button type="button" id="btnAgreeToDisagre8" style="margin-right: 90px;" 
class="btndefault2">3</button>
            <button type="button" id="btnAgreeToDisagre9" style="margin-right: 90px;" 
class="btndefault2">4</button>
            <button type="button" id="btnAgreeToDisagre10" style="margin-right: 90px;" 
class="btndefault2">5</button>
            <a class="btn btn-link disabled">Strongly Agree</a>
        </div>
    </div>


<script>
    $('button').click(function () {
    $('button').removeClass('active');
    $(this).addClass('active');
});
    $('button').click(function () {
    $('button').removeClass('active2');
    $(this).addClass('active2');
});

</script>

>Solution :

In your code, the line $('button').removeClass('active'); will remove class=active from all buttons on the page. It seems like you want it just to affect the buttons in the group of the button that was just clicked.

$('button').click(function () {
    $(this).parent().find('button').removeClass('active');
    $(this).addClass('active');
});

        .btndefault {
            color: #8c8c8c;
            font-weight: 700;
            background-color: #f4efeb;
            border: none;
            letter-spacing: 2px;
            outline: none;
        }

        .btndefault2 {
            color: #8c8c8c;
            font-weight: 700;
            background-color: #f4efeb;
            border: none;
            letter-spacing: 2px;
            outline: none;
        }
        .active {
            background-color: green;
            color: white;
        }        

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar" role="toolbar" aria-label="...">
        <div>
            <label>1. The objectives of this Training course were discussed 
sufficiently.</label>
            <br />
            <br />
        </div>
        <div class="btn-group" id="Buttons1" role="group" style="text-align: left;" 
aria-label="..." aria-orientation="horizontal">
            <a class="btn btn-link disabled" style="margin-right: 75px;">Strongly 
Disagree</a>
            <button type="button" id="btnAgreeToDisagre1" style="margin-right: 90px;" 
class="btndefault active">1</button>
            <button type="button" id="btnAgreeToDisagre2" style="margin-right: 90px;" 
class="btndefault">2</button>
            <button type="button" id="btnAgreeToDisagre3" style="margin-right: 90px;" 
class="btndefault">3</button>
            <button type="button" id="btnAgreeToDisagre4" style="margin-right: 90px;" 
class="btndefault">4</button>
            <button type="button" id="btnAgreeToDisagre5" style="margin-right: 90px;" 
class="btndefault">5</button>
            <a class="btn btn-link disabled">Strongly Agree</a>
        </div>
    </div>
    <br />
    <br />
    <div class="btn-toolbar" role="toolbar" aria-label="...">
        <div>
            <label>2.The training course material was delivered in an appropriate 
manner for me to learn the content.</label>
            <br />
            <br />
        </div>
        <div class="btn-group" id="Buttons2" role="group" style="text-align: left;" 
aria-label="..." aria-orientation="horizontal">
            <a class="btn btn-link disabled" style="margin-right: 75px;">Strongly 
Disagree</a>
            <button type="button" id="btnAgreeToDisagre6" style="margin-right: 90px;" 
class="btndefault2 active">1</button>
            <button type="button" id="btnAgreeToDisagre7" style="margin-right: 90px;" 
class="btndefault2">2</button>
            <button type="button" id="btnAgreeToDisagre8" style="margin-right: 90px;" 
class="btndefault2">3</button>
            <button type="button" id="btnAgreeToDisagre9" style="margin-right: 90px;" 
class="btndefault2">4</button>
            <button type="button" id="btnAgreeToDisagre10" style="margin-right: 90px;" 
class="btndefault2">5</button>
            <a class="btn btn-link disabled">Strongly Agree</a>
        </div>
    </div>