How to show the radio button has been selected

I trying to use radio-button for showing contents and hide others depending on selected radio. What is going on is everything works fine, as each radio button show its content the only issue is that the radio-button not showing that is selected.

Html code:

<div class="col-12">
<div class="row">  
  
            <div class="col-xl-3 col-sm-6">
                    <div class="card radius-10 border-start border-0 border-3 border-info">
                      <div class="card-body">
                         <div class="d-flex align-items-center">
                            <div>
                               <p class="mb-0 text-secondary" style="padding-bottom: 5px;">Payments</p>
                               <div class="custom-radio mr-3">
                                   <input type="radio" id="radio_1" name="paymentradi">
                                   <label class="radio_wrap" data-radio="radio_1"></label>
                               </div>
                            </div>
                            <div class="widgets-icons-2 rounded-circle bg-gradient-scooter text-white ms-auto"><i class="icofont-dollar"></i>
                            </div>
                         </div>
                      </div>
                    </div>
                   </div>
                   <div class="col-xl-3 col-sm-6">
                    <div class="card radius-10 border-start border-0 border-3 border-danger">
                       <div class="card-body">
                          <div class="d-flex align-items-center">
                             <div>
                                <p class="mb-0 text-secondary" style="padding-bottom: 5px;">Ads</p>
                                <div class="custom-radio mr-3">
                                    <input type="radio" id="radio_2" name="adsradi">
                                    <label class="radio_wrap" data-radio="radio_2"></label>
                                </div>
                             </div>
                             <div class="widgets-icons-2 rounded-circle bg-gradient-bloody text-white ms-auto"><i class="icofont-megaphone"></i>
                             </div>
                          </div>
                       </div>
                    </div>
                   </div>
                   
        <div class="col-12">
            <div class="row">  
         <div class="content">

            <div class="radio_content radio_1">
           <p>1</p>
            </div>

            <div class="radio_content radio_2">
               <p>2</p>
            </div>


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

The javascript code:

  $(document).ready(function(){
/* by default hide all radio_content div elements except first element */
$(".content .radio_content").hide();
/* when any radio element is clicked, Get the attribute value of that clicked radio element and show the radio_content div element which matches the attribute value and hide the remaining tab content div elements */
$(".radio_wrap").click(function(){
  var current_raido = $(this).attr("data-radio");
  $(".content .radio_content").hide();
  $("."+current_raido).show();
})

});

I had also create short screen record video it may explain more the situation: https://www.youtube.com/watch?v=MqM2jvqI29I&ab_channel=MohamadSimo