How to get the exact unique value on checkBox select while other checkBox is deselected? (jQuery)

I have created a group of checkBox where my aim is to select one checkbox and get another checkbox deselected.

I have successfully achieved that using the solution from Stackoverflow.

Now, I am trying to get the value of the checkbox on select. The main issue here is that when I select a checkbox sometimes I get the previous value rather than the current value.

Example - When I click a checkbox with label 5, I get 5. Then, I click 10 sometimes I get 10 but more often than not it shows 5. When I go next 15 then my previous value is shown i.e. 10 and so on.

  $("form :input").change(function () {
    var checkboxes = $("input[name='" + this.name + "']:checked");
    console.log(checkboxes.val());
    if (checkboxes) {
      $(checkboxes).not(this).prop("checked", false);
     }
     
});
});

<form action="#" method="post">
        <div class="cal_box">
          <div class="part1">
            

            <div class="bill_input">
              <label for="custom_tip">Select Tip %</label>
              <div class="tip_btn_group">
                <input type="checkbox" name="tip" id="tip5" value="5" />
                <label class="btn_box" for="tip5">5%</label>
                <input type="checkbox" name="tip" id="tip10" value="10" />
                <label class="btn_box" for="tip10">10%</label>
                <input type="checkbox" name="tip" id="tip15" value="15" />
                <label class="btn_box" for="tip15">15%</label>
                <input type="checkbox" name="tip" id="tip25" value="25" />
                <label class="btn_box" for="tip25">25%</label>
                <input type="checkbox" name="tip" id="tip50" value="50" />
                <label class="btn_box" for="tip50">50%</label>
                <input
                  type="text"
                  name="custom_tip"
                  id="tip"
                  value=""
                  placeholder="Custom"
                />
              </div>
            </div>

          
          </div>
        </div>
      </form>

https://jsfiddle.net/mrrajsoni/run821g5/3/