Change Parent Div Background onclick form multiple Child Div li

Question

I am trying to make a parent div background img change onclick wwith multiple li instances. Each li should change the background to a map of that state. I am successfully doing this for one instance

This works:

        <ul>
            <li><div class="panel-heading" role="tab" id="stateNine">
                <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#stateal" aria-expanded="false" aria-controls="stateal">Alabama | </h3></div>
                </li>
                <script>function changeBackground() {
                        event.currentTarget.className = ('bucketal');
                }</script>`

This works once, it fires the last script instance on every button, ignoring the previous. The background changes but only to the last instance's background. There will be a total # of 9 different instances. (showing 3)

<div onclick="changeBackground(this)" class="bucket2"> 
        <div class="locations">
    <div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default loc" style="background-color;none;">

        <ul>
            <li><div class="panel-heading" role="tab" id="stateNine">
                <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#stateal" aria-expanded="false" aria-controls="stateal">Alabama | </h3></div>
                </li>
                <script>function changeBackground() {
                        event.currentTarget.className = ('bucketal');
                }</script>
            <li><div class="panel-heading" role="tab" id="stateEight">
                <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#statefl" aria-expanded="false" aria-controls="statefl">Florida | </h3></div>
                <script>function changeBackground() {
                        event.currentTarget.className = ('bucketfl');
                }</script></li>
            <li><div class="panel-heading" role="tab" id="stateSeven">
                <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#statega" aria-expanded="false" aria-controls="statega">Georgia | </h3></div>
                <script>function changeBackground() {
                        event.currentTarget.className = ('bucketga');
                }</script></li></li>

There are so many good posts here around this but I have not found the answer for multiple instances. My apologies if I have missed it. I appreciate I may be not following best practices for the inline HTML/JS instances and am open to the best/new solution.

Answer 1

<div id="changeBackground">
    <button data-class="red">
    Red
    </button>
     <button data-class="blue">
    blue
    </button>
     <button data-class="green">
    green
    </button>
</div>

Js

var el = document.getElementById("changeBackground");
el.addEventListener("click", changeBackground);
function changeBackground(e) {
        e.currentTarget.className = e.target.getAttribute('data-class');
}

Css:

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

https://jsfiddle.net/ye7dy58y/