JSFiddle - React, Tailwind, and code Playground

by Rani Kheir

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="checkbox">
  <label for="email">electronics
    <input type="checkbox" name="product_category[]" value="electronics" id="product_category" class="electronics">
  </label>
</div>
<div class="form-group" id="efileu" style="display:none;">
  <input type="file" name="checkboxfile0" id="efile" style="width:100%">
</div>
<div class="checkbox">
  <label for="email">kitchen
    <input type="checkbox" name="product_category[]" value="kitchen" id="product_category" class="kitchen">
  </label>
</div>
<div class="form-group" id="kfileu" style="display:none;">
  <input type="file" name="checkboxfile1" id="kfile" style="width:100%">
</div>

<script>
  $(".electronics").click(function() {
    if (!$("#efileu").is(":visible")) {
      $("#efileu").show();
    } else {
        var $el = $('#efileu');
        $el.wrap('<form>').closest('form').get(0).reset();
        $el.unwrap();
        $("#efileu").hide();
    }

  });
  $(".kitchen").click(function() {
    if (!$("#kfileu").is(":visible")) {
      $("#kfileu").show();
    } else {
        var $el = $('#kfileu');
        $el.wrap('<form>').closest('form').get(0).reset();
        $el.unwrap();
        $("#kfileu").hide();
    }

  });

</script>