How to display the textarea and select tag after selecting the check box?

I am getting the issue in my code. 1) I have to display the select dropdown and textarea after clicked on the check box. 2) I have to display the male and female option after checked on gender check box.

    $(function() {
      $(".add_input").change(function() {
        if (this.checked) {
          $("#items").append('<div class="' + this.id + '"> <input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" /></div>');
        } else {
          $('#items').find('.' + this.id).remove();
        }
      });
    });

<script src="http://ift.tt/2nYZfvi"></script>

    <input type="checkbox" name="check-fields" class="add_input" id="get_select" data-type="select"><label for="get_select">State</label>
    <input type="checkbox" name="check-fields" class="add_input" id="get_textarea" data-type="textarea"><label for="get_textarea">Address</label>
    
    <!--gender-->
    <input type="checkbox" name="check-fields" class="add_input" id="get_radio" data-type="radio"><label for="get_radio">Gender</label>
    <input type="radio" name="check-fields"  id="get_radio"  value="male">male
    <input type="radio" name="check-fields"  id="get_radio" value="female">female