JSFiddle - React, Tailwind, and code Playground

by ClaxMan

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 style="display:flex;flex-direction: row;width: 200px;justify-content: space-between;">
    <div>
        <input type="radio" name="data_cm" data-price="85" >
        <label for="html">100x80cm</label><br>
        <input type="radio" name="data_cm" data-price="90">
        <label for="html">130x90cm</label><br>
        <input type="radio" name="data_cm" data-price="150">
        <label for="html">160x100cm</label>
    </div>
    <div>
        <input type="radio" name="data_w" data-price="250" >
        <label for="html">80w</label><br>
        <input type="radio" name="data_w" data-price="350">
        <label for="html">100w</label><br>
        <input type="radio" name="data_w" data-price="500">
        <label for="html">130w</label>
    </div>
</div>
Fiyat: <input type="text" id="price">

JavaScript

var cm = 0;
    var w = 0;
     $('input[name="data_cm"], input[name="data_w"]').change(function(){
        cm = $('input[name="data_cm"]:checked').data('price');
        w  = $('input[name="data_w"]:checked').data('price');
        $('#price').val((cm+w));
    });