How to hide/show input by radiobutton for wordpress site with woocommerce?

Question

JavaScript

<p id="billing_gorod_field"><input type="text" class="input-text " name="billing_gorod" id="billing_gorod"></p>
<p id="billing_index_field"><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" class="shipping_method" checked="checked"></li>
<li><input type="radio" id="shipping_method_2" class="shipping_method" checked="checked"></li>
<li><input type="radio" id="shipping_method_3" class="shipping_method" checked="checked"></li>
</ul>
</div>

#billing_index_field, #billing_gorod_field {
  display: none;
}

It is necessary to show the fields with "id=billing_index_field" and "id=billing_gorod_field" when radiobutton "id=shipping_method_3" is selected, and hide these fields when any other radiobutton is selected. Please help me write a function.

I understand that I need to write in JQuery, because they helped me write it like this https://jsfiddle.net/soledar10/8ndn8b7t/1/ , but an Uncaught TypeError appeared: $ is not a function.
The essence of the task is to make fields in woocommerce when placing an order, which will appear only when choosing the delivery method by mail, if there are ideas on how to do this easier, I will be glad to hear it. Thank you.

Answer 1

Uncaught TypeError: $ is not a function.

Wrap what you were given in

jQuery(function($){
//ваш код
});

But something tells me that the error will disappear, and you will not get the result, if I think correctly, then for the light version of solving your problem, you will also need to add setTimeout

Answer 2

https://jsfiddle.net/lega911/5s8136sx/