jQuery change other value if main input form is (on.change)

I am using Laravel and javascript + jQuery then, what I need is if I click the select option value, it will change the other form input based on (count value).

Here is my preview image :

nah if i click the value of select option in “Tipe Biaya” column, it will count jumlah column*biaya operational column then put the result in total column (in One row).

here my Html code:

<table class="table table-bordered table-responsive-md table-striped text-center">
    <thead>
    <tr>
        <th class="text-center">Nama Cabang</th>
        <th class="text-center">Jumlah</th>
        <th class="text-center">Biaya Operasional</th>
        <th class="text-center">Tipe Biaya</th>
        <th class="text-center">Total</th>
    </tr>
    </thead>
    <tbody  class="distributionList">
        @foreach($branches as $key => $fb)
            <tr>
                <td class="pt-3-half text-left">
                    {{ $fb->name }}
                </td>
                <td class="pt-3-half">
                    <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="" placeholder="0">
                </td>
                <td class="pt-3-half">
                    <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="" placeholder="0">
                </td>
                <td class="pt-3-half">
                    <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
                        <option value="pecentage">Pecentage</option>
                        <option value="flat">Number</option>
                    </select>
                </td>
                <td class="pt-3-half">
                    <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="" placeholder="0" readonly>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

Here my JavaScript and jQuery

    $(document).ready(function(){
        var count = 0;
        $(".operational_cost_type").each(function() {
            $(this).change(function(){
                event.preventDefault();
                var var_operational_cost_type = $(this).val();
                
                var var_each_operational_cost = $(this).closest('.each_operational_cost');
                var var_total_operational_cost = $(this).find('.total_operational_cost').val();
                
                console.log(var_each_operational_cost);

            });
            count++;
        });
    });

Thank you so much!

Answer

You can get value of jumlah and biaya column using $(this).closest("tr").find.. then simply use .val() to add result inside your total column inputs.

Demo Code :

$(document).ready(function() {
  var count = 0;
  //if you need on chnage of input as well(else remove that input[type=number]..)
  $(document).on("change input", ".operational_cost_type , input[type=number]", function() {
    event.preventDefault();
    var var_operational_cost_type = $(this).val();
    var selector = $(this).closest("tr")
    //get product quantity
    var product_quantity = selector.find('.product_quantity').val();
    var total_operational_cost = selector.find('.total_operational_cost')
    //get opertional cost
    var each_operational_cost = selector.find('.each_operational_cost').val();
    //mutliply and add total to total col
    total_operational_cost.val(product_quantity * each_operational_cost)
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive-md table-striped text-center">
  <thead>
    <tr>
      <th class="text-center">Nama Cabang</th>
      <th class="text-center">Jumlah</th>
      <th class="text-center">Biaya Operasional</th>
      <th class="text-center">Tipe Biaya</th>
      <th class="text-center">Total</th>
    </tr>
  </thead>
  <tbody class="distributionList">

    <tr>
      <td class="pt-3-half text-left">
        something
      </td>
      <td class="pt-3-half">
        <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
      </td>
      <td class="pt-3-half">
        <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
      </td>
      <td class="pt-3-half">
        <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
          <option value="pecentage">Pecentage</option>
          <option value="flat">Number</option>
        </select>
      </td>
      <td class="pt-3-half">
        <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
      </td>
    </tr>
    <tr>
      <td class="pt-3-half text-left">
        something1
      </td>
      <td class="pt-3-half">
        <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
      </td>
      <td class="pt-3-half">
        <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
      </td>
      <td class="pt-3-half">
        <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
          <option value="pecentage">Pecentage</option>
          <option value="flat">Number</option>
        </select>
      </td>
      <td class="pt-3-half">
        <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
      </td>
    </tr>
    <tr>
      <td class="pt-3-half text-left">
        something2
      </td>
      <td class="pt-3-half">
        <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
      </td>
      <td class="pt-3-half">
        <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
      </td>
      <td class="pt-3-half">
        <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
          <option value="pecentage">Pecentage</option>
          <option value="flat">Number</option>
        </select>
      </td>
      <td class="pt-3-half">
        <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
      </td>
    </tr>

  </tbody>
</table>