JSFiddle - React, Tailwind, and code Playground

HTML

<div id="PMA" class="blocos">
  <div class="form-group g4">
    <label>Escolha o tipo de Festa que deseja</label>
    <div class="checkfesta">
      <div class="row">
        <div class="col-md-5 col-sm-6">
          <input id="add-festa-p" onclick="marcaDesmarcaFesta(this)" class="tfesta" type="checkbox" name="Piquenique" value="496" />
          <label for="add-festa-p">Festa Piquenique</label>
        </div>
        <div class="col-md-3 col-sm-6">
          <input id="add-festa-k" onclick="marcaDesmarcaFesta(this)" class="tfesta" type="checkbox" name="kids" value="0" />
          <label for="add-festa-k">Festa Kids</label>
        </div>
        <div class="col-md-4 col-sm-6">
          <input id="add-festa-s" onclick="marcaDesmarcaFesta(this)" class="tfesta" type="checkbox" name="space" value="1101" />
          <label for="add-festa-s">Festa Space</label>
        </div>
      </div>
    </div>
  </div>

  <div id="add-festa-p-div" class="form-group">
    <label>Escolha o período da Festa</label>
    <div class="checkfesta">
      <div class="row">
        <div class="col-md-5">
          <input id="add-periodo-t" onclick="marcaDesmarcaPeriodo(this)" class="periodo" type="checkbox" name="tarde" value="1399" />
          <label for="add-periodo-t">Período da Tarde</label>
        </div>
        <div class="col-md-5">
          <input id="add-periodo-n" onclick="marcaDesmarcaPeriodo(this)" class="periodo" type="checkbox" name="noite" value="1399" />
          <label for="add-periodo-n">Período da Noite</label>
        </div>
      </div>
    </div>
  </div>

  <div id="add-festa-k-div" class="form-group">
    <label>Escolha o período da Festa</label>
    <div class="checkfesta">
      <div class="row">
        <div class="col-md-5">
          <input id="add-periodo-t" onclick="marcaDesmarcaPeriodo(this)" class="periodo" type="checkbox" name="tarde" value="1399" />
          <label for="add-periodo-t">Período da Tarde</label>
        </div>
        <div...

CSS

#add-festa-p-div {
  display: none;
}

#add-festa-k-div {
  display: none;
}

#add-festa-s-div {
  display: none;
}

JavaScript

$("#add-festa-p").change(function() {
  if ($(this).prop('checked')) {
    $("#add-festa-p-div").show();
    console.log("Mostra a DIV");
  } else {
    $("#add-festa-p-div").hide();
    console.log("Esconde a DIV");
  }
});

$("#add-festa-k").change(function() {
  if ($(this).prop('checked')) {
    $("#add-festa-k-div").show();
    console.log("Mostra a DIV");
  } else {
    $("#add-festa-k-div").hide();
    console.log("Esconde a DIV");
  }
});

$("#add-festa-s").change(function() {
  if ($(this).prop('checked')) {
    $("#add-festa-s-div").show();
    console.log("Mostra a DIV");
  } else {
    $("#add-festa-s-div").hide();
    console.log("Esconde a DIV");
  }
});