JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="form-check">
  <input class="form-check-input" type="radio" name="familiar" id="google" value="1">
  <label class="form-check-label" for="google">google</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="familiar" id="friends" value="2">
  <label class="form-check-label" for="friends">friends</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="familiar" id="advertising" value="3">
  <label class="form-check-label" for="advertising">advertising</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="familiar" id="marketer" value="4">
  <label class="form-check-label" for="marketer">marketer</label>
</div>

<div class="col-sm-5 d-none" id="referral_code">
    <input type="text" class="form-control" name="referral_code" placeholder="Write referral code here" />
</div>

JavaScript

$("input[name=familiar]").click(function() {
	if ( $('#marketer').is(":checked") ){
  	$('#referral_code').addClass('d-block');
  } else {
  	$('#referral_code').removeClass('d-block');
  }  
});