JQuery is(':checked') not working as intended on form

I'm building a form which will have additional input's appear if some values are true and or false.

Currently I'm having 3 issues:

1. Div not fading in even though is(':checked') is true

When my checkbox with the id of #wedding is true (checked), I'm looking to fadeIn() another div which contains radio buttons. From what I've read on other stack overflow questions (namely this one), it mentions that is(':checked') is how you would determine whether a checkbox is checked, and then perform an action. So knowing this, I have the following:

  $('.coaches').hide();
  if ($('#event2').is(':checked')) {
    console.log('clicked');
    $('.coaches').fadeIn();
  }

But nothing happens, not even the console.log()

2. If either of the checkboxes are checked, I want to display textfield and buttons. But when I click one checkbox, it disappears

So, I have this one working partially. In my demo below, when you check a checkbox, it shows the textfield and button. Here are my scenario's:

• Click Event 1, fields show.
• Click Event 2, fields show.
• Click Event 1 and then Event 2, fields show.
• Click Events 1 and then Events 2 and then uncheck Events 1, fields disappear.
• Click Events 1 and then Events 2 and then uncheck Events 2, fields disappear.

When either of the checkboxes are checked I want the textfields and buttons to remain. Then if no checkbox is checked, hide them.

3. When there is more than one input[name="attendee"], add <button class="remove action-button" type="button">-</button>. Currently my count approach isn't working and I think it's because my 'count' isn't going up dynamically.

var element = $('input[name="attendee"]');
var count = 0
$(".add").on("click", function(event) {
  count++;
});
console.log(count);

if (count > 1) {
  $('.remove').fadeIn();
} else {
  $('.remove').hide();
}

Demo in full:

jQuery(function($) {

  // below im trying to show the coaches div only if #event2 is true (checked).
  $('.coaches').hide(); // hide it first
  // if checked, show it
  if ($('#event2').is(':checked')) {
    console.log('clicked');
    $('.coaches').fadeIn();
  }

  // now im trying to show the textfield and add or remove buttons  if either of the checkboxes are checked.
  $('input[name="attendee"]').hide();
  $('.add').hide();
  $('.remove').hide();

  $('#event1, #event2').on('click', function() {
    if ($(this).is(':checked')) {
      $('input[name="attendee"]').fadeIn();
      $('.add, .remove').fadeIn();
    } else {
      $('input[name="attendee"]').hide();
      $('.add, .remove').hide();
    }
  });

// ADD more textfields on plus click, remove text on minus
        $('.add').on('click', add);
        $('.remove').on('click', remove);

        function add() {
          var new_chq_no = parseInt($('#total_chq').val()) + 1;
          var new_input = "<input type='text' placeholder='Attendee name' id='new_" + new_chq_no + "'>";
          $('#new_chq').append(new_input);
          $('#total_chq').val(new_chq_no);
        }

        function remove() {
          var last_chq_no = $('#total_chq').val();
          if (last_chq_no > 1) {
            $('#new_' + last_chq_no).remove();
            $('#total_chq').val(last_chq_no - 1);
          }
        }



});

form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>


  <input type="checkbox" id="event1" name="event1" value="Event 1">
  <label for="event1">Event 1</label>

  <input type="checkbox" id="event2" name="event2" value="Event 2">
  <label for="event2">Event 2</label>

  <div id="new_chq"></div>
  <input type="text" name="attendee" placeholder="Attendee name">
  <input type="hidden" value="1" id="total_chq">

  <button class="add" type="button">+</button>
  <button class="remove" type="button">-</button>

  <div class="coaches">
  
    <label>
      <input type="radio" id="travel_yes" name="travel" value="Yes">
      <span>Yes</span>
    </label>

    <label>
      <input type="radio" id="travel_no" name="travel" value="No">
      <span>No</span>
    </label>

</div>


</form>