title: Jquery: limit user to select only two radio options at once and display values inside divs
body: <p>I am developing a product comparator where user have to select only two products within a universe with 4 products for example.</p>
  <p>In this case, the user would select two products within this universe with 4 products and the information of these selected products would appear inside columns (column 1 and column 2).</p>
  <p>I tried to research some similar questions here, but unfortunatly i didn't find a correct way to do that:</p>
  <ol>
  <li><a href="https://stackoverflow.com/questions/41260223/get-two-values-from-select-option-at-once">Get two values from select option at once</a></li>
  <li><a href="https://stackoverflow.com/questions/55493193/select-and-radio-options-to-show-div">Select and Radio options to show div</a></li>
  <li><a href="https://stackoverflow.com/questions/11689530/two-radio-buttons-are-selecting-at-once">Two radio buttons are selecting at once</a></li>
  </ol>
  <p>My question is: How can i select only two radio options, always limiting only two selections? Also, how can i display radio values from selected options inside column 1 and the second selected product inside column 2?</p>
  <p>Below is the code that i'm using:</p>
  <p><strong>HTML structure that display 4 products with their respective radio buttons:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;h2 class=&quot;mb-3&quot;&gt;Produtos&lt;/h2&gt;
    
  &lt;div class=&quot;row justify-content-center&quot;&gt;
    
  &lt;div class=&quot;col-2&quot;&gt;
  
  &lt;img src=&quot;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&quot; width=&quot;100px&quot;/&gt;
  
  &lt;input class=&quot;form-check-input radio&quot; type=&quot;radio&quot; name=&quot;produto1&quot; id=&quot;1&quot; value=&quot;Tênis preto&quot;&gt;
  &lt;label class=&quot;form-check-label&quot; for=&quot;1&quot;&gt;&lt;/label&gt;
  
  &lt;/div&gt;
  
  &lt;div class=&quot;col-2&quot;&gt;
  
  &lt;img src=&quot;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&quot; width=&quot;100px&quot;/&gt;
      
  &lt;input class=&quot;form-check-input radio&quot; type=&quot;radio&quot; name=&quot;produto2&quot; id=&quot;2&quot; value=&quot;Tênis branco&quot;&gt;
  &lt;label class=&quot;form-check-label&quot; for=&quot;2&quot;&gt;&lt;/label&gt;
    
  &lt;/div&gt;
  
  &lt;div class=&quot;col-2&quot;&gt;
  
  &lt;img src=&quot;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&quot; width=&quot;100px&quot;/&gt;
      
  &lt;input class=&quot;form-check-input radio&quot; type=&quot;radio&quot; name=&quot;produto3&quot; id=&quot;3&quot; value=&quot;Tênis verde&quot;&gt;
  &lt;label class=&quot;form-check-label&quot; for=&quot;3&quot;&gt;&lt;/label&gt;
  
  &lt;/div&gt;
  
  &lt;div class=&quot;col-2&quot;&gt;
  
  &lt;img src=&quot;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&quot; width=&quot;100px&quot;/&gt;
      
  &lt;input class=&quot;form-check-input radio&quot; type=&quot;radio&quot; name=&quot;produto4&quot; id=&quot;4&quot; value=&quot;Tênis azul&quot;&gt;
  &lt;label class=&quot;form-check-label&quot; for=&quot;4&quot;&gt;&lt;/label&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id=&quot;coluna1&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;coluna2&quot;&gt;&lt;/div&gt;
  
  </code></pre>
  <p>Below is jquery code that takes the values ​​of the selected items and display their information in respective columns. These code not allow to select more than two products:</p>
  <pre class="lang-js prettyprint-override"><code>$('.radio').change(function(){
      
      var shoes = $(this).val();
      var count = $(&quot;input[type='radio']:checked&quot;).length;
      
      if(count &gt; 2){
          
      alert(&quot;you just have to select only two shoes.&quot;);
        
          $(this).prop('checked', false);
      
      return false;
        
      }
    
      $('#column1').text(shoes);
      $('#column2').text(shoes);
      
      // 
  
  });
  
  </code></pre>
  <p>In this case, how could i improve my code to reach the correct result? As a practical example, i I made a draft on JSFidle: <a href="https://jsfiddle.net/kg51Lvzx/" rel="nofollow noreferrer">https://jsfiddle.net/kg51Lvzx/</a></p>