JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<div class="m-3 d-flex gap-4 calculate_pack">
  <div class="cm_packs">
    <label>
      <input type="radio" name="cm_pack" data-pack="cm_pack_1" />
      100x80cm
    </label>
    <label>
      <input type="radio" name="cm_pack" data-pack="cm_pack_2" />
      130x90cm
    </label>
    <label>
      <input type="radio" name="cm_pack" data-pack="cm_pack_3" />
      160x100cm
    </label>
  </div>
  <div class="w_packs">
    <label>
      <input type="radio" name="w_pack" data-pack="w_pack_1" />
      80w
    </label>
    <label>
      <input type="radio" name="w_pack" data-pack="w_pack_2" />
      100w
    </label>
    <label>
      <input type="radio" name="w_pack" data-pack="w_pack_3" />
      130w
    </label>
  </div>
  <div class="result text-success my-auto">
    Fiyat: <span>Seçim yapınız</span>
  </div>
</div>

CSS

label {
  display: block;
}

JavaScript

var result = 0;
var $result_el = $(".result span");
var packages = {
  "cm_pack_1": 50,
  "cm_pack_2": 100,
  "cm_pack_3": 200,
  "w_pack_1": 200,
  "w_pack_2": 300,
  "w_pack_3": 400
};

$(".calculate_pack input[data-pack]").on("change", function() {
  result = 0;
  $("input:checked").each(function() {
    result += parseInt(packages[$(this).data("pack")]);
  });
  $result_el.text(result);

});