JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="modal hide fade" id="sozlesme-modal" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Sözleşme (Planlama 1)</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
			<div class="modal-body">
				<form id="frmMdSozlesme" class="form-horizontal">
					<div id="sozlesmeBilgileri" class="row-fluid">
						<div class="col-xs-6">
							<strong>Toplam: <span id="sozlesmeToplam" data-deger="345.00">345,00</span></strong>
						</div>
					</div>
					<h5 class="ozelBaslik mt-2 mb-2">Ödeme Planı</h5>
					<div class="form-group row">
						<label for="txtSozlesmeTaksit" class="col-sm-2 text-danger">Taksit</label>
						<div class="col-sm-3">
							<input id="txtSozlesmeTaksit" type="number" autocomplete="off" class="form-control form-control-sm" maxlength="2" placeholder="Taksit" value="1" min="1" max="36">
						</div>
					</div>
					<div id="sozlesmeTablo">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th></th>
									<th width="45%">Tarih</th>
									<th width="35%">Tutar</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th>Peşinat</th>
									<td>
										<div class="input-group">
											<input type="tel" autocomplete="off" class="form-control sozlesmeTaksitTarih" data-mask="date"...

JavaScript

$('#sozlesme-modal').modal('show');
$('#sozlesme-modal').on('shown.bs.modal', function () {
	$('#txtSozlesmeTaksit').keydown(function () {
        var taksit = parseInt($('#txtSozlesmeTaksit').val() || 0);
		if (taksit <= 0) {
			$('#sozlesmeTablo').html('');
			return;
		}
    });
});