JSFiddle - React, Tailwind, and code Playground

by Vinit Divekar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label>IsPaid</label>
        <input id="IsPaid" type="checkbox" />
      </div>
      <div id="Fees"  class="form-group hidden">
        <label>Course Fees</label>
        <input type="text" class="form-control"/>
      </div>
    </div>
  </div>

</div>

CSS

.hidden {
  display: none;
}

JavaScript

$(document).ready(function() {
  $('#IsPaid').change(function() {
  console.log("My value" + $(this).is(':checked'));
			$('#Fees').toggleClass('hidden')

  });

})