Show hide div based on radio button

Show hide div on radio button

 <div class="form-group row">
                <label class="col-sm-3 col-form-label">Salary type</label>
                  <div class="col-sm-4">
                    <div class="form-radio">
                        <label class="form-check-label">
                          <input type="radio" class="form-check-input salaryRadio" name="salary_type" value="0" checked=""> Monthly
                          <i class="input-helper"></i>
                        </label>
                    </div>
                  </div>
                  <div class="col-sm-5">
                      <div class="form-radio">
                        <label class="form-check-label">
                          <input type="radio" class="form-check-input salaryRadio" name="salary_type"  value="1"> Productivity
                          <i class="input-helper"></i>
                        </label>
                      </div>
                  </div>
              </div>

            <div class="form-group" id="monthly">
                <label for="exampleInputEmail1">Salary </label>
                <input type="text" class="form-control"   name="salary" >
            </div>

            <div class="form-group" id="production" style="display:none;">
                <label for="exampleInputEmail1">Salary (Per Production)</label>
                <input type="text" class="form-control"  name="salary_per_production" >
            </div>
            
$(function() {
  $(".salaryRadio").change(function() {
    if($(this).val()=="0")
      {
        $('#monthly').css('display','block');
        $('#production').css('display','none');
      }
    else
      {
        $('#production').css('display','block');
        $('#monthly').css('display','none');
      }
  });
});