JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!--section 1 -->section 1
<div class="showHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox" />
        <label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox" />
        <label class="" for="">Print</label>
    </div>
</div>section 2
<!--section 2 -->
<div class="showHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox" />
        <label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox" />
        <label class="" for="">Print</label>
    </div>
</div>section 3
<!--section 3 -->
<div class="showHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox" />
        <label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox" />
        <label class="" for="">Print</label>
    </div>
</div>
section 4
<!--section 4 -->
<div class="showHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox" />
        <label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox" />
        <label class="" for="">Print</label>
    </div>
</div>

CSS

.showHideDiv:hover{
    cursor:pointer;
}

JavaScript

$(function(){
    $('.checkbox').on('click', function(){
        $(this).closest('.custom-input').prev('.showHideDiv').toggle();
    });
});