make text input hide and show with radio button - php

Question

I am trying to make a radio button with 2 options i.e. option A and Option B.
I have 2 text input ( A and B ) and some other text input that always has to be there.
Option A of the radio button has to make disappear text input (A) and show another text input (B). Option B should make this the opposite. ( disappear text input (B) and show another text input (A) )
I don't know how to make that 2 text inputs.
will appreciate some help.
<form class="user" id="RegisterForm" action="" method="post">
<? print("USER ROLE : ") ?>
<input type="radio" name="user_role" <?php if (isset($user_role) && $user_role=="A") echo "checked";?> value="A">A
<input type="radio" name="user_role" <?php if (isset($user_role) && $user_role=="B") echo "checked";?> value="B">B
//REST OF the code defines some text inputs that are always should show.
<?php if ($fullname_req != "-1") { ?>
<div class="form-group">
<input type="text" class="form-control form-control-user" id="displayname" name="fullname" placeholder="<?php _e('Display name', 'user-panel-pro') ?>">
</div>
<?php } ?>
<?php if ($firstname_req != "-1") { ?>
<div class="form-group row">
<?php if ($firstname_req != "-1" or $lastname_req != "-1") { ?>
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="First-Name" name="firstname" placeholder="<?php _e('first name', 'user-panel-pro') ?>">
</div>
<?php } ?>
<?php if ($lastname_req != "-1") { ?>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="Last-Name" name="lastname" placeholder="<?php _e('last name', 'user-panel-pro') ?>">
</div>
<?php } ?>
</div>
<?php } ?>
<?php if ($username_req != "-1") { ?>
<div class="form-group">
<input type="text" class="form-control form-control-user" id="User-Name" name="username" placeholder="<?php _e('Username', 'user-panel-pro') ?>">
</div>
<?php } ?>
<?php if ($email_req != "-1") { ?>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="Email" name="email" placeholder="<?php _e('Email', 'user-panel-pro') ?>">
</div>
<?php } ?>

Answer 1

I am not able to understand your code, so I am just giving a small demo
<div class="radioBtns">
<label for='rbtnLoginTypeMobile'><input checked type="radio" id="rbtnLoginTypeMobile" name="rbtnLoginType" value='1' onclick="showLogin(1)"/><span>Mobile</span></label>
<label for='rbtnLoginTypeEmail'><input type="radio" id="rbtnLoginTypeEmail" name="rbtnLoginType" value='0' onclick="showLogin(0)" /><span>Email</span></label>
</div>
<div class="mobilelogin">Your Mobile Div</div>
<div class="emaillogin">Your Email Div</div>
<script type="text/javascript">
function showLogin(val)
{
if(val==1)
{
$('.emaillogin').css('display','none');
$('.mobilelogin').css('display','');
}
else
{
$('.mobilelogin').css('display','none');
$('.emaillogin').css('display','');
}
}
</script>