JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<h2 class="mb-3">Products - shoes</h2>
  
  <div class="row justify-content-center">
  
  <div class="col-2 ms-2">
	<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/cde9362a09ba4dd38c9ead6600ac074e_9366/Tenis_Duramo_SL_2.0_Preto_GW8336_01_standard.jpg" width="100px"/>
	
<div>

  <input class="form-check-input radio" type="radio" name="product1" id="1" value="Black shoes">
   <label class="form-check-label" for="1"></label>
  
</div>

</div>

<div class="col-2 ms-2">

	<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7ed0855435194229a525aad6009a0497_9366/Tenis_Superstar_Branco_EG4958_01_standard.jpg" width="100px"/>
	
<div>

  <input class="form-check-input radio" type="radio" name="product2" id="2" value="White shoes">
  <label class="form-check-label" for="2"></label>
  
</div>

</div>

<div class="col-2 ms-2">
	<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/9326e8db8d8e4e509e42ad26010cf693_9366/Tenis_adidas_4DFWD_Pulse_Preto_Q46451_01_standard.jpg" width="100px"/>
	
<div>

  <input class="form-check-input radio" type="radio" name="product3" id="3" value="Green shoes">
   <label class="form-check-label" for="3"></label>
    
</div>

</div>

<div class="col-2 ms-2">
	<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7a80a0e74201457eb1e5adcb00ff92f8_9366/Tenis_Dropset_Trainer_Azul_GZ2941_01_standard.jpg" width="100px"/>
	
<div>

  <input class="form-check-input radio" type="radio" name="product4" id="4" value="Blue shoes">
   <label class="form-check-label" for="4"></label>
    
</div>

</div>

</div>

<div id="column1"></div>
<div id="column2"></div>

JavaScript

$('.radio').change(function(){
	
	var shoes = $(this).val();
	var count = $("input[type='radio']:checked").length;
	
	if(count > 2){
		
    alert("you just have to select only two shoes.");
	  
		$(this).prop('checked', false);
    
    return false;
	  
	}

    $('#column1').text(shoes);
    $('#column2').text(shoes);
    
    // how can i allow user to select only two options and display the respective values inside column 1 and column 2? 

});