How to make Highcharts legends focus on the chart that it belongs to?

Question

I have two charts on the page and both charts have the same legends. Clicking the legend entries in the second chart seems to affect the first chart. How can I focus so that the legend strictly focus on the chart it belongs to?

https://jsfiddle.net/samwhite/8xu21dpz/

first chart data:

series: [{
    name: 'info 1',
    data: [1.615478304, 29.99195083]
},{
    name: 'info 2',
    data: [3.279163489, 43.97775501]
},{
    name: 'info 3',
    data: [19.27465688, 9.135811503]
}]

second chart data:

data = [
    [{
        name: 'info 1'
        data: gen_data([1, 3, 13, 250, 450, 750], 26541.0),
        color: colors[0]
    },{
        name: 'info 2'
        data: gen_data([2, 4, 23, 250, 550, 1141, 1500], 53874),
        color: colors[1]
    }],
    [{
        name: 'info 3'
        data: gen_data([13, 40, 300, 500, 1000, 1500, 2000], 316667),
        color: colors[2]
    }],
]



function set_legend() {
    legend = $('#legend');
    legend.html('');
    let listed = {};
    $.each(Highcharts.charts, function(i, chrt) {
        $.each(chrt.series, function(j, serie) {
            let tmp_key = serie.name.replace(/[\s,-]/g, '');
            if (!Object.keys(listed).includes(tmp_key)) {
                legend.append(
                    '<div class="item '+tmp_key+'"><div class="symbol" style="background-color:' +
                    serie.color +
                    '"></div><div class="serieName" id="">' +
                    serie.name +
                    '</div></div>'
                );
                listed[tmp_key] = [serie];
            } else {
                listed[tmp_key].push(serie);
            }
        });
    });

    Object.keys(listed).forEach(key => {
        // Get the legend and add a click handler
        $('#legend .'+key).click(function() {
            listed[key].forEach(serie => {
                if (serie.visible) serie.setVisible(false);
                else serie.setVisible(true);
            });
        });
        
    });
}

Answer 1

You can add some flag to avoid looping through the first chart.

  $.each(Highcharts.charts, function(i, chrt) {
    //
    // Flag to avoid looping through the first chart
    //
    if (i !== 0) {
      $.each(chrt.series, function(j, serie) {
        let tmp_key = serie.name.replace(/[\s,-]/g, '');
        if (!Object.keys(listed).includes(tmp_key)) {
          legend.append(
            '<div class="item ' + tmp_key + '"><div class="symbol" style="background-color:' +
            serie.color +
            '"></div><div class="serieName" id="">' +
            serie.name +
            '</div></div>'
          );
          listed[tmp_key] = [serie];
        } else {
          listed[tmp_key].push(serie);
        }
      });
    }
  });

Demo: https://jsfiddle.net/BlackLabel/yatz5m38/

Answer 2

A JSFiddle would be nice. Do notice though that

            if (serie.visible) serie.setVisible(false);
            else serie.setVisible(true);

can be simplified to serie.setVisible(.serie.visible)