Изменить цвет фона выбранного div при нажатии не работает?

$(".item").on('click', function() {
  $('.item').removeClass('highlight');
  $(this).addClass('highlight');
  var item = $(this).find('input');
  item.trigger("click");
  if (item.prop("checked")) {
    item.prop('checked', true);
  } else {
    item.prop('checked', false);
  }

});

$("input:checkbox").on('click', function() {
  var $box = $(this);
  if ($box.is(":checked")) {
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);
  }
});

$("input[name=submit]").on('click', function() {
  var redirect = $('input[name = "product"]:checked').val();
  window.location.href = redirect;
});

/*Funnel Template - Step 2 - Order Form */

.main-panel {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
  min-height: 320px;
  width: 100%;
}

.main-panel h2 {
  font-size: 26px;
  text-align: left;
  margin: 0;
  font-weight: bold;
}

.main-panel .item {
  margin: 15.4px 0;
  padding: 8px 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.main-panel .item p {
  margin: 0;
}

.main-panel .selection {
  float: left;
  width: 10%;
}

.main-panel .left-section {
  float: left;
  width: 46%;
}

.main-panel .right-section {
  float: right;
  width: 37%;
  margin-left: 5%;
  text-align: right;
}

.main-panel .item.highlight {
  background-color: #ffc500;
  z-index: 0;
  border-radius: 5px;
}

.main-panel .item input[type='checkbox'] {
  opacity: 0;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin: 0;
}

.main-panel .item span::after {
  opacity: 1;
  z-index: 1;
  content: "";
  display: inline-block;
  position: absolute;
  width: 18px;
  height: 18px;
  left: 10px;
  border: 2px solid #172969;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  line-height: 1.1em;
}

input[type = "checkbox"]:checked+span:after {
  font-family: 'FontAwesome';
  content: "\f00c";
  background-color: #172969;
  color: #fff;
}

input[type=button] {
  font-size: 18px;
  font-weight: 600;
  font-family: Noto Sans, sans-serif;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  text-transform: uppercase;
  width: 100%;
  border-radius: 5px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "main-panel">
  <form>
    <h2 style = "text-align:center;">CHOOSE YOUR PACKAGE!</h2>
    <div id = "menu1">
      <div class = "item highlight">
        <div class = "selection"><input type = "checkbox" class = "styled" name = "product" value = "#link1" checked = "checked" /><span></span> </div>
        <div class = "left-section">
          Option 1 A
        </div>
        <div class = "right-section">
          Option 1 B
        </div>
      </div>
      <div class = "item">
        <div class = "selection"> <input type = "checkbox" name = "product" value = "link#2" /><span></span> </div>
        <div class = "left-section">
          Option 1 A
        </div>
        <div class = "right-section">
          Option 1 B
        </div>
      </div>
      <div class = "item">
        <div class = "selection"> <input type = "checkbox" name = "product" value = "#link3" /><span></span> </div>
        <div class = "left-section">
          Option 1 A
        </div>
        <div class = "right-section">
          Option 1 B
        </div>
      </div>
      <div class = "item">
        <div class = "selection"> <input type = "checkbox" name = "product" value = "#link4" /><span></span> </div>
        <div class = "left-section">
          Option 1 A
        </div>
        <div class = "right-section">
          Option 1 B
        </div>
      </div>
    </div>
    <input type = "button" name = "submit" value = "Click Now!" />
  </form>
</div>