JSFiddle - React, Tailwind, and code Playground

by techrevolt

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<div class="form-group">
  <label class="font-weight-bold">Vehicle Registration</label>
  <input class="form-control" type="text" name="vehiclereg" id="vehiclereg">
</div>


<div class="form-group">
  <label class="font-weight-bold">Make and Model</label>
  <input class="form-control" type="text" name="makemodel" id="makemodel">
</div>

<div class="form-group">
  <label class="font-weight-bold">Date of Incident</label>
  <input class="form-control" type="text" name="incidentdate" id="makemodel">
</div>


<div class="form-group">
  <button type="button" class="btn btn-primary float-right pr-5 pl-5" value="Submit">Ok to proceed</button>
  <div class="clearfix"></div>

</div>








<!-- Button to Open the Modal -->
<a href="javascript:void()" role="button" class="btn">  Open Task Popup</a>
<div id="smsDocument" class="hide">
  Your vehicle has been deemed a Total Loss. We have valued your vehicle and are willing to offer you £1,500. If you accept this offer please reply to this SMS with ACCEPT, if you want to reject this offer please reply to this SMS with REJECT. Thank you
</div>
<div id="repairDocument" class="hide">

  <table>
    <tr>
      <td>
        <table>
          <tr>
            <td>
              123 Road<br/> Town
              <br/> County
              <br/> Postcode
              <br/>
            </td>
            <td width="65%">
            </td>
            <td>
              123 Road<br/> Town
              <br/> County
              <br/> Postcode
              <br/>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          Dear Mr/Mrs Customer,
        </p>
        <p>
          We can now confirm...

CSS

.hide {
  display: none;
}

JavaScript 1.7

$('a').on("click", function() {
  $("#modalContent").html($("#totalLossDocument").html()); //if total loss 
  $("#modalContent").html($("#repairDocument").html()); //if repair doc 
   $("#modalContent").html($("#smsDocument").html()); //if sms doc 
  $('#myModal').modal('show');
});