How to combine multiple scripts into 1?

Question

JavaScript

Hello. Help, please, to understand. The question is rather stupid, but I'm tired of searching, and I don't know how to formulate the question correctly.
I'm trying to add a map to svg and I need to add a class to the corresponding tag when clicking on a polygon or path and vice versa.
Here is an example:
jsfiddle.net

.fil1 {fill:#C5C6C6;}
.fil4 {fill:#898989;}
.fil2 {fill:#5B5B5B;}
.fil3 {fill:#2B2A29;}
.polygon1.active {color:red;}
.polygon2.active {color:blue;}
.polygon3.active {color:green;}
.polygon4.active {color:orange;}
#polygon1.active {fill:red;}
#polygon2.active {fill:blue;}
#polygon3.active {fill:green;}
#polygon4.active {fill:orange;}

<div class="maplabels">
  <span class="polygon1 maplabel" onclick="">Polygon 1</span>
  <span class="polygon2 maplabel" onclick="">Polygon 2</span>
  <span class="polygon3 maplabel" onclick="">Polygon 3</span>
  <span class="polygon4 maplabel" onclick="">Polygon 4</span>
</div>
<svg viewBox="0 0 3780 5316">
  <g id="map">
    <polygon class="fil1" id="polygon1" points="598,1079 1648,1079 1648,2128 598,2128 "/>
    <polygon class="fil2" id="polygon2" points="1648,1687 2255,1687 2255,2736 1648,2736 "/>
    <polygon class="fil3" id="polygon3" points="1648,1079 2255,1079 2255,1687 1648,1687 "/>
    <polygon class="fil4" id="polygon4" points="598,2128 1648,2128 1648,2736 598,2736 "/>
  </g>
</svg>

jQuery(document).ready(function($){
    $('#polygon1').on("click", function(e){
    $('.active').removeClass('active');
    $('#polygon1').addClass('active');
    $('.polygon1').addClass('active');
  });
});
jQuery(document).ready(function($){
    $('.polygon1').on("click", function(e){
    $('.active').removeClass('active');
    $('#polygon1').addClass('active');
    $('.polygon1').addClass('active');
  });
});
jQuery(document).ready(function($){
    $('#polygon2').on("click", function(e){
    $('.active').removeClass('active');
    $('#polygon2').addClass('active');
    $('.polygon2').addClass('active');
  });
});
jQuery(document).ready(function($){
    $('.polygon2').on("click", function(e){
    $('.active').removeClass('active');
    $('#polygon2').addClass('active');
    $('.polygon2').addClass('active');
  });
});

... etc.
And here's the problem, I don't know how to combine these scripts into one...
Probably something like this is needed:

jQuery(document).ready(function($){
var el = $(this).val();
    $('.polygon'+el).on("click", function(e){
    $('.active').removeClass('active');
    $('#polygon'+el).addClass('active');
    $('.polygon'+el).addClass('active');
  });
});

but I don't know how to apply it.

Answer 1

Well, for example . Or so . Or so .