I am new to jQuery, and have a problem I am not sure how to tackle.

I am creating a learning management system for teachers to assign homework to their classes. Inside of the menu shown below, when the user is on the "Class Settings" tab they should be able to un-check the box next to the class-name which would:

1. hide the assign/due date inputs, and
2. replace these inputs by making the .unassigned class visible.

If the user checks the box, the opposite should happen, basically like a toggle.

Here is the part I am not sure how to do: how would I even select the corresponding <div class='assign'> <div class='due'> <div class='unassign'> to toggle visibility? All of these should be siblings to the <section> parent that groups them together, I think.

Right now I have

var status = $(this).find('section .unassigned');

to just debug and see if I can select the elements I am trying to select, but I am not successful.

Any help/explanation would be very much appreciated.

// This section handles UX feedback for class settings //
$('.class').on('change', 'input[type="checkbox"]', function() {
  var status = $(this).find('section .unassigned');
  status.css("background-color", "yellow");
  if ($(this).is(":checked")) { // When user checks box
    status.hide();
    alert('checked');
  }
  else { // When user unchecks box 
    status.show();
    alert('unchecked');
  }
});

// This section handles navigation //
function nav(arg) {
  var destination = arg.dataset.nav;
  var pages = document.querySelectorAll("[data-page]");
  var nav = document.querySelectorAll("[data-nav]");
  
  for (i = 0; i < nav.length; i  ) { // Remove the class 'active' if it exists
    nav[i].classList.remove('active')
  }
  arg.classList.add('active'); 
  
  for (i = 0; i < pages.length; i  ) { // Hide/show the correct pages
    if (pages[i].dataset.page != destination) {
      pages[i].style.display = "none";
    } else {
      if (destination == 'basic') {pages[i].style.display = "flex";}
      if (destination != 'basic') {pages[i].style.display = "block";}
    }
  }
}

.modal {display: block !Important}

.modal {
   display: none;
   position: fixed;
   z-index: 20;
   right: 0; top: 0;
   width: 100%; height: 100%;
   overflow: auto;
   background-color: rgba(0,0,0,0.4);
   -webkit-animation-name: fadeIn;
   -webkit-animation-duration: 0.4s;
   animation-name: fadeIn;
   animation-duration: 0.4s}

.assignment-window{
  display: grid;
  position: fixed;
  overflow: hidden;
  padding: 10px;
  padding-bottom: 16px;
  box-sizing: border-box;
  width: 100vw; height: 70vh;
  bottom: 0; left: 0;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background-color: white;
  grid-template-rows: auto 1fr;
  grid-template-columns: 0.9fr 2.5fr;
  grid-template-areas:
    "asstop asstop"
    "assnav asscontent"}


/* ----------[ASS TOP]---------- */
.asstop {
  grid-area: asstop;
  padding: 24px 20px;
  box-sizing: border-box;
  border-bottom: 2px solid #581F98;}

.asstop .title {
  display: flex;
  align-items: center;}

.asstop .title input {
  flex: 1 1;
  font-size: 24px;
  border-radius: 8px;
  margin-right: 20px;
  border: 1px solid lightgray}

.asstop select {
  outline: none;
  -webkit-appearance: none;
  padding: 12px 16px;
  font-size: 24px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid lightgray}

.asstop button {
  margin-top: -5px;}


/* ----------[ASS NAV]---------- */
.assnav {
  grid-area: assnav;
  padding-top: 20px;
  padding-right: 10%;
  border-right: 1px solid lightgray}

.assnav ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none}

.assnav li {
  display: block;
  text-decoration: none;
  color: #484848;
  font-size: 20px;
  padding: 14px 20px;
  margin-bottom: 10px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;}
  .assnav li:hover {
    cursor: pointer;
    background-color: #F2F2F2}
  .assnav li.active {background-color: #EEEEEE}


/* ----------[ASS CONTENT]---------- */
.asscontent {
  grid-area: asscontent;
  display: flex;
  flex-direction: column;
  padding: 30px;
  box-sizing: border-box;
  overflow: scroll}

.asscontent input:not([type='checkbox']), .asscontent select {
  flex: 1;
  outline: none;
  -webkit-appearance: none;
  padding: 8px 16px;
  font-size: 18px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid lightgray}


/* ==== Basic Styling ==== */
.asscontent .basic {
  display: flex;
  height: 100%;
  flex-direction: column}

.asscontent .basic textarea {
  flex: 1;
  font-size: 18px;
  border-radius: 8px;
  box-sizing: border-box;}

.asscontent .basic .config {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;}
  .asscontent .basic input {text-align: center;}
  .asscontent .basic .points {width: 80px;}


/* ==== Attachment Styling ==== */
.asscontent .attachments {display: none}

.asscontent .attachments section {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid lightgray}


/* ==== Class Styling ==== */
.asscontent .class {display: none}

.asscontent .class section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid lightgray}

.asscontent .class label {cursor: pointer;}

.asscontent .class .unassigned {
  flex: 1;
  text-align: center;
  font-style: italic;
  color: darkgray;}


/* ==== Delete Styling ==== */
.asscontent .delete {display: none;}

.asscontent .delete ul {margin-bottom: 30px;}

.asscontent .delete li {margin-bottom: 10px;}

<head>
  <link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <nav></nav>
</head>

<div >
  <div >
    <div class='asstop'>
      <div class='title'>
        <select>
          <option>✏️</option>
          <option>