How to correspond tooltip title with the legends at the bottom in Highcharts?

Question

The 3 labels that I have on the horizontal stacked bar, the data flow for label 1 is different than label 2 and 3. Compare to label 2 and 3, label 1 colors flow is different.

When I hover over label 1 bars, I see correct title getting displayed in the tooltip that matches with the legend at the bottom:

However, when I hover the bar for label 2 and 3, which in this dark red, I still see "Strongly Agree" showing up in the tooltip, whereas it should have been "Strongly Disagree" if go by the legends at the bottom:

Is this something that is managable to fix it in higcharts? If so, can someone please help me how I would fix the tooltip title for label 2 and 3?

https://jsfiddle.net/samwhite/a4wtr0zb/

let chart = Highcharts.chart('container1_1', {
      chart: {
        type: 'bar',
        height: 300
      },
      credits: { 
        enabled: false 
      },
      yAxis: {
        title: { text: 'Response Rate' },
        max: 100,
        maxPadding: 0,
        labels: {
          format: '{value}%'
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0
      },
      tooltip: {
        formatter: function () {
          return '<b>'+ tooltip_titles[0][this.series.index] + '</b><br/>' + 'Response Rate: ' + (100*this.point.y).toFixed(2) + '\%';
        }
      },
      plotOptions: {
        series: {
          stacking: 'percent',
          pointWidth: 20,
          borderWidth: 0,
        },
        bar: {
        states: {
                inactive: {
                    enabled: true
                },
                hover: {
                                    opacity: .9
        }
            }
        }
      },
      legend: {
        reversed: true,
        align: 'right'
      },
      title: {
        align: 'left',
        text: 'Progress on Diversity, Inclusion, and Opportunity in our Workplace',
        style: {
          fontSize: '20px',
          fontWeight: 'bold',
        }
      },
      xAxis: {
        categories: labels,
        labels: {
          style: {
            fontSize: '1em',
            color: '#000',
            width: 370,
            float: 'left'
          }
        }
      },
      series: [{
        name: 'Strongly Agree',
        color: colors[4],
        data: []
      }, {
        name: 'Agree',
        color: colors[3],
        data: []
      }, {
        name: 'Neither Agree nor Disagree',
        color: colors[2],
        data: []
      }, {
        name: 'Disagree',
        color: colors[1],
        data: []
      }, {
        name: 'Strongly Disagree',
        color:   colors[0],
        data: []
      }]
    });

Answer 1

I made 2 changes to the fiddle

1. Change tooltip

Change to show the series name instead of referencing a list

formatter: function () {
          return '<b>'+ this.series.name + '</b><br/>' + 'Response Rate: ' + (100*this.point.y).toFixed(2) + '\%';
        }

2. Change setData()

Remove all the "colors" from setData to ensure consistency across categories.

series.setData([
              {
                name: tooltip_titles[s],
                //color: colors[s],
                      y: dept_data["102"][4-s]
              },
              {
                name: tooltip_titles[s],
                // color: colors[Math.abs(s - 4)],
                      y: dept_data["104"][4-s]
              },
              {
                name: tooltip_titles[s],
                // color: colors[Math.abs(s - 4)],
                      y: dept_data["105"][4-s]
              }]);

Here's the result:

For the first one:

For the second one:

The updated fiddle is here :