Problem displaying additional fields when a checkbox is checked

I am working on a form whereby I want when the user checks a checkbox additional fields are shown to the user. I am trying to implement the task using jquery but it aint working as expected. I want when the page loads the text-fields are hidden, when the user clicks the checkbox the 1st input field is displayed, when the checkbox is clicked again the final input field is displayed and the checkbox is disabled.

Kindly assist?

Layout

//Checkbox field
    <div class="check-now" style="width: 100%;">
    <label class="spouse-me">
    <h1 class="pumba">Enter next of kin</h1>
    <input type="checkbox">
    <span class="checkmark" id="next-kin"></span>
    </label>
    </div>

Additional fields to display when the checkbox above is clicked

<div class="form-line registar2 love">
      <input type="text-area" name="next-kin" class="form-input" required>
      <label>First Name *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
    </div>

    <div class="form-line registar2 move">
      <input type="text-area" name="next-kin" class="form-input" required>
      <label>Last Name *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
    </div>

Jquery code

$(window).load(function(){
    $('input[name="next-kin"]').hide();

    //show it when the checkbox is clicked
    $('input[id="next-kin"]').on('click', function(){
    if ( $(this).prop('checked') ) {
        $('input[name="next-kin"]').fadeIn();
    } 
    else {
        $('input[name="next-kin"]').hide();
    }
});
});