Two groups of Buttons but with same class name I have two groups of two buttons (status). If you click on "Complete" or "On Hold", it will change the background color of the button. I am using same class name for all the buttons but each group of buttons have data attribute data-section='Park One' and data-section='Park Two'

jsFiddle

I am using the $.each() function to detect the section, remove all the background and add the background-color on selected button. Is the code well coded? What can be improved?

jQuery:

$(".updateStatus").click(function () {

    var buttonValue = $(this).val();
    var section = $(this).data("section");

    var cssClass = (buttonValue === "complete") ? 'green' : 'orange';

    $('.updateStatus').each(function () {
        if ($(this).data("section") == section) {

            $(this).removeClass("green orange");

            if ($(this).val() == buttonValue) {
                $(this).addClass(cssClass);
            }
        }
    })

});


HTML

&lt;h2&gt;Park One&lt;/h2&gt;

&lt;button class="updateStatus" value="complete" data-section='Park One'&gt;Complete&lt;/button&gt;
&lt;button class="updateStatus" value="on hold" data-section='Park One'&gt;On Hold&lt;/button&gt;

&lt;h2&gt;Park Two&lt;/h2&gt;

&lt;button class="updateStatus" value="complete" data-section='Park Two'&gt;Complete&lt;/button&gt;
&lt;button class="updateStatus" value="on hold" data-section='Park Two'&gt;On Hold&lt;/button&gt;
If you must use jQuery, then the simplest way by far is to wrap each section in a div :

&lt;div class="section"&gt;
    &lt;h2&gt;Park One&lt;/h2&gt;
    &lt;button class="updateStatus" value="complete"&gt;Complete&lt;/button&gt;
    &lt;button class="updateStatus" value="on hold"&gt;On Hold&lt;/button&gt;
&lt;/div&gt;

&lt;div class="section"&gt;
    &lt;h2&gt;Park Two&lt;/h2&gt;
    &lt;button class="updateStatus" value="complete"&gt;Complete&lt;/button&gt;
    &lt;button class="updateStatus" value="on hold"&gt;On Hold&lt;/button&gt;
&lt;/div&gt;


This allows you to use .siblings("button") to select the clicked button's counterpart :

$(".updateStatus").click(function () {
    $(this)
        .addClass(($(this).val() === "complete") ? 'green' : 'orange')
        .siblings("button").removeClass("green orange");
});


The .each() loop vanishes.

It's very common to use divs or spans like this, to give your DOM structure. 

Updated fiddle