JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<p id="billing_gorod_field">
    billing_gorod
    <input type="text" class="input-text" name="billing_gorod" id="billing_gorod">
</p>
<p id="billing_index_field">
    billing_index
    <input type="text" class="input-text " name="billing_index" id="billing_index">
</p>

<div id="order_review">
    <ul>
        <li>
            <input type="radio" id="shipping_method_1" name="shipping_method" class="shipping_method" checked="checked">
        </li>
       <li>
            <input type="radio" id="shipping_method_2" name="shipping_method" class="shipping_method">
        </li>
        <li>
            <input type="radio" id="shipping_method_3" name="shipping_method" class="shipping_method">
        </li>
    </ul>
</div>

CSS

#billing_index_field,
#billing_gorod_field{
    display: none;
}

JavaScript

$(document).ready(function() {
   $('#order_review').find('input[type="radio"]').click(function() {
   		
        var div = $('#billing_index_field, #billing_gorod_field');
   
       //if($(this).attr('id') == 'shipping_method_3') {
       if (this.id == "shipping_method_3") {
            div.show();           
       }
       else {
            div.hide();   
       }
   });
});