How to change step color in progress bar?

Question

css

There is a simple progressbar and two buttons. By clicking on any of these two buttons, 1 step is added to the progress bar. How to make this very step change its color, not the entire progressbar, but only the step. If you click on the 'red' button, then make the step red, and if you click on the 'green' button,
respectively, make it green.
Here is my code, but it repaints the entire progressbar, which is not good.

#progressBar {
            width: 500px;
            height: 6px;
            border-radius: 10px;
            background: #435C91
        }
        #pd {
            width: 0%;
            height: 5px;
            border-radius: 10px;
}

<div id="Bar">
        <div id="progressBar">
            <div id="pd"></div>
        </div>
        <br>
        <button id="green">green</button>
        <button id="red">red</button>
    </div

$(document).ready(function() {

            proc = 0

            $('#green').click(function() {
                proc += 1
                $('#pd').css('width', proc + '%')
                $('#pd').css('background', 'green') // тут нужно покрасить только один шаг
            })
            $('#red').click(function() {
                proc += 1
                $('#pd').css('width', proc + '%')
                $('#pd').css('background', 'red') // тут нужно покрасить только один шаг
            })
        })

Answer 1

<div id="progressBar"></div>

<button>green</button>
<button>red</button>
<button>yellow</button>
<button>magenta</button>
<button>aqua</button>

let percent = 0;
const gradientParts = [];

$('button').click(function() {
  if (percent < 100) {
    const color = $(this).text();
    percent++;
    gradientParts.push(`${color} ${percent - 1}%`, `${color} ${percent}%`);
    const gradient = gradientParts.concat(`#435C91 ${percent}%`, '#435C91 100%');

    $('#progressBar').css({
      background: `linear-gradient(to right, ${gradient.join(', ')})`,
    });
  }
});

https://jsfiddle.net/2yqzgeLb/