HTML Checkbox giving all values

I know this question seems repeated but I have searched through many sites and am still unable to get my code working.

I'll explain my problem as I paste the code.

Here is my form:

<form action="">
  <% position = @deals_daily_count.size - 2 %>
  <% num_of_expired_deals = @deals_daily_count[position].size %>
  <% loops = 0 %>
  <% while loops < num_of_expired_deals %>
      <input type="checkbox" class="choice" name="choice[]" value="<%= @deals_daily_count[position][loops] %>"><%= @deals_daily_count[position][loops] %>
      <br/>
      <% loops = loops + 1 %>
  <% end %>
</form>

My javascript is as shown below:

document.getElementById("add_deal_button").addEventListener("click", function () {
      var buttons = $('.choice');
      var chart = $('#analytics_line').highcharts();

      buttons.each(function () {

          var currentBox = $(this);
          var isChecked = currentBox.is(':checked');
          var wasChecked = currentBox.data("wasChecked");
          var choice = $(this).val();

          <% loops = 0 %>

          <% while loops < num_of_expired_deals %>
              var title = "<%= raw @deals_daily_count[position][loops]%>"
              if (choice == title) {
                  <% title_of_deal = @deals_daily_count[position][loops].to_s%>
              }
              <% loops = loops + 1 %>
          <% end %>

          <% merchant_id_position = @deals_daily_count.size - 1 %>
          <% merchant_id  = @deals_daily_count[merchant_id_position] %>
          <%= raw data =  DealAnalyticService.set_analytics_for_line_graph(merchant_id, title_of_deal, Date.today.beginning_of_month, Date.today) %>
          if (!wasChecked && isChecked) {
              var series = chart.addSeries({
                  name: "<%= data[0][0]%>" + " view count",
                  pointStart: <%= data[0][1] %>,
                  pointInterval: 24 * 3600 * 1000,
                  data: <%= data[0][2] %>,
                  visible: true
              });
              currentBox.data("series", series);
              var series2 = chart.addSeries({
                  name: "<%= data[0][0]%>" + " redemption count",
                  pointStart: <%= data[0][1] %>,
                  pointInterval: 24 * 3600 * 1000,
                  data: <%= data[0][3] %>,
                  visible: true
              });
              currentBox.data("series2", series2);
          }

          if (wasChecked && !isChecked) {
              var series = currentBox.data("series");

              series.remove();

              var series2 = currentBox.data("series2");

              series2.remove();
          }

          if (isChecked) {
              currentBox.data("wasChecked", true);
          }
          else {
              currentBox.data("wasChecked", false);
          }

      });
  });

To explain what I'm doing, I am actually using HighCharts and am trying to populate the data into a series and add it to my chart when checkbox is ticked. When it isn't tick, I will remove it from my graph.

The removing and adding part is working perfectly. Only issue is that when adding a graph, apparently

buttons.each(function (){}

is not working properly. It does not go iterate through every single checkbox and give me the value of that particular checkbox. Instead, I believe it returned me all values of the checkbox. This results in regardless which checkbox is checked, only the last value is used since it goes through my while loop.

I have tried using ("input:checkbox").each(function() {} but it gives me the same result.

I've also tried using isChecked to determine whether to pass the value into choice or pass null but it does not work as well

I hope that someone can explain to me why is this the issue as I've been trying several methods with no success for hours.

Thank you!