Почему появляется несколько всплывающих окон сохранения?

Я рисую диаграмму, используя гугл чарт. Диаграмма отображается с помощью поля выбора.

Затем появится кнопка «Сохранить как PDF», чтобы сохранить изображение в формате PDF.

Это код:

google.charts.setOnLoadCallback(drawCategoryNameChart);
function drawCategoryNameChart(){

// for category-filter
$('#category_filter').on('change',function(){
var select1 = $(this).val();  // category-filter value
var jsonCategoryNameData = $.ajax({
url: "<?php echo $ajaxurl11; ?>",
contentType: "application/json",
data: {Value1 : select1},
dataType: "json",
async: false
}).responseText;var CategoryNameData = new google.visualization.DataTable(jsonCategoryNameData);

var optionsCategoryNameChart = {
//title: 'Job/Internship Distribution by Category',
titleTextStyle: {
color: 'Black',
fontSize: 18
},
pieSliceText: 'none',
fontSize: '11',
hAxis: {
title: 'Category Name',
},
vAxis: {
title: 'Total',
minValue: 0,
gridlines: { count: 4 }
},
legend: {textStyle: {color: '#464847', fontSize: 11}},
tooltip: {isHtml: true},
backgroundColor: '#F8F9FA',
colors: [ '#3B84BB', '#FFAF45', '#FFE345', '#0CAA63', '#1D40A6', '#F7AE12', '#F75012','#6944C3'],
chartArea: {
backgroundColor: {
stroke: '#fff',
strokeWidth: 1
}
},
height: 300,
chartArea: { left:"10%",top:"20%",width:"70%",height:"50%" }
};// Instantiate and draw our pie chart, passing in some options.
var CategoryNameChart = new google.visualization.ColumnChart(document.getElementById('categoryname_chart_div'));

//draw the chart
CategoryNameChart.draw(CategoryNameData, optionsCategoryNameChart);

google.visualization.events.addListener(CategoryNameChart, 'ready', function () {
btnSave.disabled = false;
});

var btnSave = document.getElementById('pdf-categoryname');

btnSave.addEventListener('click', function () {
var doc = new jsPDF();
doc.setFontSize(15);
doc.text(70, 25, "Job & Internship by Category");
doc.addImage(CategoryNameChart.getImageURI(), 15, 30);
doc.setFontSize(9);
doc.text(50, 115, "The bar chart shows the category of job & Internship posted by linked companies");
doc.save('category_name.pdf');
}, false);

});
}

Диаграмма отображается в этом коде;

<div class="chart-3-5block-inner">
<div class="chart-block-title">Job & Internship by Category</div>
<div class="chart-view" style="padding-top: 10px; padding-left: 10px">

<!-- //combo box options to select application filter -->
<?php
echo 'Category Group: ';
echo '<select id="category_filter">';
echo '<option value="0" selected="selected">Select</option>';
echo '<option value="1">Accounting/Finance</option>';
echo '<option value="2">Admin/Human Resources</option>';
echo '<option value="3">Arts/Media/Communications</option>';
echo '<option value="4">Building/Construction</option>';
echo '<option value="5">Computer/Information Technology</option>';
echo '<option value="6">Education/Training</option>';
echo '<option value="7">Engineering</option>';
echo '</select>';

?>

</div>
<div class="chart-view" id="categoryname_chart_div"></div>
<div class="chart-block-description">The bar chart shows the category of job & Internship posted by linked companies</div>
<div class="chart-block-view">
<input id="pdf-categoryname" type="button" value="Save as PDF" disabled />
</div>
</div>

Однако у кнопки «Сохранить как PDF» возникла проблема. Если поле выбора выбрано много раз, при нажатии кнопки «Сохранить как» появится несколько всплывающих окон. 2 раза кликнули, появилось 2 всплывающих окна. Сохраняет изображение всего предыдущего выбранного графика. Как сделать так, чтобы он появлялся только один раз, хотя поле выбора выбрано несколько раз?

Если я поставлю функцию btnSave вне функции onchange, она не сможет прочитать CategoryNameChart. Как получить значение CategoryNameChart в функции onchange, чтобы btnSave мог принять значение и использовать его?

Это пример игры с jsfiddle. Но это все еще не полностью работает. Я включаю фиктивные данные, например, поэтому нужно немного отрегулировать.

https://jsfiddle.net/5aprn44f/3/