Попробуйте так:

function filterDiv(){
      var div = document.querySelectorAll('div');
      idSel = this.value;
      [].forEach.call(div, function(el){
        el.style.display=(idSel=="*"||idSel==el.id)?'block':'none';
      });
    };
$(document).ready(function(){
    filterDiv(); // Подразумеваем, что нужный option уже выбран и нам надо просто после загрузки страницы отфильтровать элементы.
    document.querySelector('select').onchange=filterDiv; // эта же функция "вешается на onChange.
});

Но, на мой взгляд, т.к. у вас есть php backend, то можно уже на уровне php кода не выводить ненужные div'ы. Ставить им сразу display:none.

Переписал немного ваш код: https://codepen.io/achernyavskiy/pen/XWJyvpv

https://www.chartjs.org/docs/latest/charts/radar.html
https://www.jqueryscript.net/demo/Create-Skill-Exp...
Не подойдет?