How to hide/show div on radio button change
I am trying to hide two rows on radio button change.
I have a question (Is your postal address the same as your residential address), Asking user with radio buttons labelled YES/NO
If the user check YES the two rows remain unchecked, if they check NO the div will be displayed to them now all working fine but when I check NO but it displayed it like this 
but it is supposed to show me like this
Here is my code `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Webmin - Bootstrap 4 & Angular 5 Admin Dashboard Template" />
<meta name="author" content="potenzaglobalsolutions.com" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Recruitment</title>
<!-- online Bootsrtap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
/*a:link {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}*/
input[type='radio'] {
transform: scale(2);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="content-wrapper" style="margin-left:0px">
<div class="page-title">
<div class="row">
<div class="col" style="text-align:center;font-size: 25px;font-family: sans-serif;">
<h4 class="mb-0">Application Form</h4>
</div>
</div>
</div>
<br/>
<br/>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-3">
<label class="control-label" for="emailAddr"><b>Current Email Address</b></label>
</div>
<div class="col-3">
<input required type="email" style="width:300px" class="form-control" id="emailAddr">
</div>
<div class="col-3">
<label class="control-label" for="phonenum"><b>Mobile number</b></label>
</div>
<div class="col-3">
<input required type="number" style="width:300px" class="form-control" id="phonenum">
</div>
</div>
<br><br>
<div class="row">
<div class="col-3">
<label class="control-label" for="surname"><b>Surname</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" autocomplete="off" class="form-control" id="surname" name="surname" />
</div>
<div class="col-3">
<label class="control-label" for="givenname"><b>Given name</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" autocomplete="off" class="form-control" id="givenname" name="givenname" />
</div>
</div>
<br><br>
<div class="row">
<div class="col-3">
<label class="control-label" for="preferredname"><b>Preferred name</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" autocomplete="off" class="form-control" id="preferredname" name="preferredname">
</div>
<div class="col-3">
<label class="control-label" for="streetaddress"><b>Street address</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" autocomplete="off" class="form-control" id="streetaddress" name="streetaddress">
</div>
</div>
<br><br>
<div class="row">
<div class="col-3">
<label class="control-label" for="status"><b>State</b></label>
</div>
<div class="col-3">
<select class="form-control" style="width:300px" id="state" name="state">
<option value="0">Select State</option>
<option value="1">QLD</option>
<option value="2">NSW</option>
<option value="3">VIC</option>
<option value="4">TAS</option>
<option value="5">ACT</option>
<option value="6">WA</option>
<option value="7">SA</option>
<option value="8">NT</option>
</select>
</div>
<div class="col-3">
<label class="control-label" for="postcode"><b>Postcode</b></label>
</div>
<div class="col-3">
<input required type="number" style="width:300px" autocomplete="off" class="form-control" id="postcode" name="postcode">
</div>
</div>
<br><br>
<div class="row">
<div class="col-3">
<label class="control-label" for="postalcheck"><b>Is your postal address the same as your residential address</b></label>
</div>
<div class="col-3">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1" onchange="getValue(this)">
<label class="form-check-label" for="inlineRadio1"> <b>Yes</b></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2" onchange="getValue(this)">
<label class="form-check-label" for="inlineRadio2"> <b>No</b></label>
</div>
</div>
<div class="col-3">
<label class="control-label" for="resume"><b>Upload a recent copy of your resume</b></label>
</div>
<div class="col-3">
<input type="file" id="resume" name="resume">
</div>
</div>
<br><br>
<div class="row" id="postalone">
<div class="col-3">
<label class="control-label" for="postalstate"><b>Postal: State</b></label>
</div>
<div class="col-3">
<select class="form-control" style="width:300px" id="state" name="state">
<option value="0">Select Postal State</option>
<option value="1">QLD</option>
<option value="2">NSW</option>
<option value="3">VIC</option>
<option value="4">TAS</option>
<option value="5">ACT</option>
<option value="6">WA</option>
<option value="7">SA</option>
<option value="8">NT</option>
</select>
</div>
<div class="col-3">
<label class="control-label" for="postpostcode"><b>Postal: Postcode</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" class="form-control" id="postpostcode" name="postpostcode">
</div>
</div>
<br><br>
<div class="row" id="postaltwo">
<div class="col-3">
<label class="control-label" for="poststraddr"><b>Postal: Street address</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" class="form-control" id="poststraddr" name="poststraddr">
</div>
</div>
<br><br>
<p class="text-muted pt-3 mb-0 mt-2 border-top"></p>
<br><br>
<div class="row">
<div class="col">
<h3>Screening Questions</h3>
</div>
</div>
<br><br>
<div class="row">
<div class="col-3">
<label class="control-label" for="postalstate"><b>Q1</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" class="form-control" id="postalstate" name="postalstate" />
</div>
<div class="col-3">
<label class="control-label" for="fname"><b>Q2</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" class="form-control" id="LevelOfExperience" name="LevelOfExperience" />
</div>
</div>
<br><br>
<div class="row">
<div class="col-3">
<label class="control-label" for="postalstate"><b>Q3</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" class="form-control" id="postalstate" name="postalstate" />
</div>
<div class="col-3">
<label class="control-label" for="fname"><b>Q4</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" class="form-control" id="LevelOfExperience" name="LevelOfExperience" />
</div>
</div>
<br><br>
<p class="text-muted pt-3 mb-0 mt-2 border-top"></p>
<br>
<div class="row">
<div class="col-9"></div>
<div class="col-3 text-right">
<input type="button" class="btn-lg btn-outline-primary" value="Apply" onclick="SaveApplication();">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- online bootstrap -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
function getValue(radio) {
if ((radio.value) == 1) {
document.getElementById("postalone").style.display = "none";
document.getElementById("postaltwo").style.display = "none";
} else {
document.getElementById("postalone").style.display = "block";
document.getElementById("postaltwo").style.display = "block";
}
}
</script>
</body>
</html>`
Remove the style tag from your columns and use a single div tag and put all inputs in side that. then use the code to hide the div.
<div id="postal" style="display: none;" >
<div class="row" >
<div class="col-3">
<label class="control-label" for="postalstate"><b>Postal: State</b></label>
</div>
<div class="col-3">
<select class="form-control" style="width:300px" id="state" name="state">
<option value="0">Select Postal State</option>
<option value="1">QLD</option>
<option value="2">NSW</option>
<option value="3">VIC</option>
<option value="4">TAS</option>
<option value="5">ACT</option>
<option value="6">WA</option>
<option value="7">SA</option>
<option value="8">NT</option>
</select>
</div>
<div class="col-3">
<label class="control-label" for="postpostcode"><b>Postal: Postcode</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" class="form-control" id="postpostcode" name="postpostcode">
</div>
</div>
<br><br>
<div class="row" id="postaltwo">
<div class="col-3">
<label class="control-label" for="poststraddr"><b>Postal: Street address</b></label>
</div>
<div class="col-3">
<input required type="text" style="width:300px" class="form-control" id="poststraddr" name="poststraddr">
</div>
</div>
</div>
use less javascript code.
function getValue(radio) {
if ((radio.value) == 1) {
document.getElementById("postal").style.display = "none";
} else {
document.getElementById("postal").style.display = "block";
}
}