How to save data jQuery?

I have some dynamic data in my element. Look at the sample below:

<div id="chart_1"></div>

There are 75 questions that the user answers and then the average is taken, and it must be represented on a graph.

<ul class="clearfix">
 <li>
  <div class="container_numbers">
   <input type="radio" id="1" name="question_1" class="required media_1" value="1">
   <label class="radio very_bad" for="1">1</label>
  </div>
 </li>
 <li>
  <div class="container_numbers">
   <input type="radio" id="2" name="question_1" class="required media_1" value="2">
    <label class="radio bad" for="2">2</label>
  </div>
 </li>
 <li>
  <div class="container_numbers">
   <input type="radio" id="3" name="question_1" class="required media_1" value="3">
    <label class="radio average" for="3">3</label>
  </div>
 </li>
 <li>
  <div class="container_numbers">
   <input type="radio" id="4" name="question_1" class="required media_1" value="4">
    <label class="radio very_good" for="4">4</label>
  </div>
 </li>
</ul>

If I put a constant it is represented instead the variables average_1 and average_2 are not represented, how can I save the variables and take them out of the loop?

$(document).ready(function() {  

    $(".media_1").click(function(event) {
        var total = 0;
        var media_1 = 0;
        $(".media_1:checked").each(function() {
            total += parseInt($(this).val());
            media_1 = total / 15;
        });
    
        if (total == 0) {
            $('#media_1').val('');
        } else {                
            $('#media_1').val(media_1);
        }

     $(".media_2").click(function(event) {
        var total = 0;
        var media_2 = 0;
      $(".media_2:checked").each(function() {
        total += parseInt($(this).val());
        media_2 = total / 15;
      });
      
      if (total == 0) {
        $('#media_2').val('');
      } else {              
        $('#media_2').val(media_2);
      }

        var options = {
            series: [{
            data: [media_1, media_2]
          }],
            chart: {
            height: 350,
            type: 'bar',
            events: {
              click: function(chart, w, e) {
              }
            }
          },
          colors: colors,
          plotOptions: {
            bar: {
              borderRadius: 6,
              columnWidth: '45%',
              distributed: true,
            }
          },
          dataLabels: {
            enabled: false
          },
          legend: {
            show: false
          },
          xaxis: {
            categories: [
              ['Proactivity', 'Self-Confidence'],
            ],
            labels: {
              style: {
                colors: colors,
                fontSize: '12px'
              }
            }
          }
          };
  
          var chart = new ApexCharts(document.querySelector("#chart_1"), options);
          chart.render();
    });