Я хочу получить значение фильтра данных для других кнопок одновременно

Question

Я получил только 0 значений в этом коде. Когда я пишу this внутри функции, я получаю 3 одинаковых значения. Пожалуйста, помогите мне с этой проблемой. Заранее спасибо

$('#main_cat button, #price button, #color button').click(function() {
  // Get data of category
  var main_id = $("#main_cat button").data('filter');
  var price = $("#price button").data('filter');
  var color = $("#color button").data('filter');
  alert(main_id + " " + price + " " + color);

  $.ajax({
    url: "<?php echo base_url(); ?>user/fetch",
    method: "POST",
    data: {
      main_id: main_id,
      price: price,
      color: color
    },
    success: function(data) {
      $('#products_list').css("height", "455px");
      $('#products_list').html(data);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main_cat" class="flex-w flex-l-m filter-tope-group m-tb-10">
  <button
    class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5 how-active1"
    data-filter="0"
  >
    All Products
  </button>
  <?php foreach ($main_cat as $key =>
  $value) { ?>
  <button
    class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5"
    data-filter="<?php echo $value['id']; ?>"
  >
    <?php echo $value['name']; ?>
  </button>
  <?php } ?>
</div>

<div class="filter-col3 p-r-15 p-b-27">
  <div class="mtext-102 cl2 p-b-15">
    Color
  </div>

  <ul id="color">
    <li class="p-b-6">
      <button data-filter="0" class="filter-link stext-106 trans-04">
        All
      </button>
    </li>
    <?php foreach ($color as $key =>
    $value) { ?>
    <li class="p-b-6">
      <button
        data-filter="<?php echo $value['name'];?>"
        class="filter-link stext-106 trans-04"
      >
        <?php echo $value['name']; ?>
      </button>
    </li>
    <?php } ?>
  </ul>
</div>

<div class="filter-col2 p-r-15 p-b-27">
  <div class="mtext-102 cl2 p-b-15">
    Price
  </div>

  <ul id="price">
    <li class="p-b-6">
      <button
        data-filter="0"
        class="filter-link stext-106 trans-04 filter-link-active"
      >
        All
      </button>
    </li>

    <li class="p-b-6">
      <button data-filter="1" class="filter-link stext-106 trans-04">
        $0.00 - $50.00
      </button>
    </li>

    <li class="p-b-6">
      <button data-filter="2" class="filter-link stext-106 trans-04">
        $50.00 - $100.00
      </button>
    </li>
  </ul>
</div>