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

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  role="toolbar" aria-label="...">
        <div>
            <label>1. The objectives of this Training course were discussed 
sufficiently.</label>
            <br />
            <br />
        </div>
        <div  id="Buttons1" role="group" style="text-align: left;" 
aria-label="..." aria-orientation="horizontal">
            <a  style="margin-right: 75px;">Strongly 
Disagree</a>
            <button type="button" id="btnAgreeToDisagre1" style="margin-right: 90px;" 
>1</button>
            <button type="button" id="btnAgreeToDisagre2" style="margin-right: 90px;" 
>2</button>
            <button type="button" id="btnAgreeToDisagre3" style="margin-right: 90px;" 
>3</button>
            <button type="button" id="btnAgreeToDisagre4" style="margin-right: 90px;" 
>4</button>
            <button type="button" id="btnAgreeToDisagre5" style="margin-right: 90px;" 
>5</button>
            <a >Strongly Agree</a>
        </div>
    </div>
    <br />
    <br />
    <div  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  id="Buttons2" role="group" style="text-align: left;" 
aria-label="..." aria-orientation="horizontal">
            <a  style="margin-right: 75px;">Strongly 
Disagree</a>
            <button type="button" id="btnAgreeToDisagre6" style="margin-right: 90px;" 
>1</button>
            <button type="button" id="btnAgreeToDisagre7" style="margin-right: 90px;" 
>2</button>
            <button type="button" id="btnAgreeToDisagre8" style="margin-right: 90px;" 
>3</button>
            <button type="button" id="btnAgreeToDisagre9" style="margin-right: 90px;" 
>4</button>
            <button type="button" id="btnAgreeToDisagre10" style="margin-right: 90px;" 
>5</button>
            <a >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>

CodePudding user response：

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  role="toolbar" aria-label="...">
        <div>
            <label>1. The objectives of this Training course were discussed 
sufficiently.</label>
            <br />
            <br />
        </div>
        <div  id="Buttons1" role="group" style="text-align: left;" 
aria-label="..." aria-orientation="horizontal">
            <a  style="margin-right: 75px;">Strongly 
Disagree</a>
            <button type="button" id="btnAgreeToDisagre1" style="margin-right: 90px;" 
>1</button>
            <button type="button" id="btnAgreeToDisagre2" style="margin-right: 90px;" 
>2</button>
            <button type="button" id="btnAgreeToDisagre3" style="margin-right: 90px;" 
>3</button>
            <button type="button" id="btnAgreeToDisagre4" style="margin-right: 90px;" 
>4</button>
            <button type="button" id="btnAgreeToDisagre5" style="margin-right: 90px;" 
>5</button>
            <a >Strongly Agree</a>
        </div>
    </div>
    <br />
    <br />
    <div  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  id="Buttons2" role="group" style="text-align: left;" 
aria-label="..." aria-orientation="horizontal">
            <a  style="margin-right: 75px;">Strongly 
Disagree</a>
            <button type="button" id="btnAgreeToDisagre6" style="margin-right: 90px;" 
>1</button>
            <button type="button" id="btnAgreeToDisagre7" style="margin-right: 90px;" 
>2</button>
            <button type="button" id="btnAgreeToDisagre8" style="margin-right: 90px;" 
>3</button>
            <button type="button" id="btnAgreeToDisagre9" style="margin-right: 90px;" 
>4</button>
            <button type="button" id="btnAgreeToDisagre10" style="margin-right: 90px;" 
>5</button>
            <a >Strongly Agree</a>
        </div>
    </div>