JSFiddle - React, Tailwind, and code Playground

by imran44

HTML

<div class="container" id="main" >
    <div class="sidebar">

      <form action=" " method="POST" autocomplete="off">
        {% csrf_token %}

        <div id="head_top"></div>

        <div class="row">
         
          <div class="row" id="row_id">

          <br>

          <div style="margin-left: 19px; font-size: 17px;">Payment Term</div>
            <div class="row" id="id_row">
              <input type="text" name="Payment_Term" maxlength="255" class="form-control mb-3"
                placeholder="Payment_Term" id="Payment_Term" required="" onkeyup="myFunction3()">
            </div>  
          
            <div style="margin-left: 19px; font-size: 17px;">NetDue Date</div>
            <div class="row" id="id_row">

            <input type="text" name="datefilter" class="form-control mb-3" placeholder="Netdue_Date" id="Netdue_Date"
                required="" oninput="myFunction4()">

            </div>           
             
            <div style="margin-left: 19px; font-size: 17px;">Predicted Paid days</div>
            <div class="row" id="id_row">
             
              <input type="range"  min="1" max="100" name="Predicted_Paid_days" maxlength="100" id="Predicted_Paid_days"
                placeholder="Predicted_Paid_days" required="" oninput="myFunction2()">
              <!-- <input type='number' min="0" max="100"> -->
            </div>
            
            <br>
            <br>
            <div style="margin-left: 19px; font-size: 17px; ">PBK Description</div>
            <div class="row" id="id_row">
              <input type="text" name="PBK_Desc" maxlength="255" class="form-control mb-3" placeholder="PBK Description"
                id="PBK_Desc" required="" onkeyup="myFunction1()">
            </div>
            <br>
            <br>

            <div style="margin-left: 19px; font-size: 17px;">Vendor Name</div>
            <div class="row" id="id_row">
              <input type="text" name="Vendor_Name" maxlength="255"...

CSS

<style>

.multiselect {
  width: 100%;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#mySelectOptions {
  display: none;
  border: 0.5px #7c7c7c solid;
  background-color: #ffffff;
  max-height: 150px;
  overflow-y: scroll;
}

#mySelectOptions label {
  display: block;
  font-weight: normal;
  display: block;
  white-space: nowrap;
  min-height: 1.2em;
  background-color: #ffffff00;
  padding: 0 2.25rem 0 .75rem;
  /* padding: .375rem 2.25rem .375rem .75rem; */
}

#mySelectOptions label:hover {
  background-color: #1e90ff;
}
</style>
<style>

      .multiselectarea {
        width: 100%;
      }
      
      .selectBoxarea {
        position: relative;
      }
      
      .selectBoxarea select {
        width: 100%;
      }
      
      .overSelectarea {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      
      #mySelectOptionsarea {
        display: none;
        border: 0.5px #7c7c7c solid;
        background-color: #ffffff;
        max-height: 150px;
        overflow-y: scroll;
      }
      
      #mySelectOptionsarea label {
        display: block;
        font-weight: normal;
        display: block;
        white-space: nowrap;
        min-height: 1.2em;
        background-color: #ffffff00;
        padding: 0 2.25rem 0 .75rem;
        /* padding: .375rem 2.25rem .375rem .75rem; */
      }
      
      #mySelectOptionsarea label:hover {
        background-color: #1e90ff;
      }
      </style>
      
<script>

JavaScript

<script>

  $(function () {

    $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
        cancelLabel: 'Clear'
      }
    });

    $('input[name="datefilter"]').on('apply.daterangepicker', function (ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
    });

    $('input[name="datefilter"]').on('cancel.daterangepicker', function (ev, picker) {
      $(this).val('');
    });

  });
</script>

<script>
<!-- companycode checkbox -->
<!-- <script>
  //  companycode checkbox
  function filter_companycode() {
    //declare variables
    var inputs, input, filters, table, tr, td, i, r;
    //get all checkbox inputs
    inputs = document.querySelectorAll("input[type=checkbox]");
    table = document.getElementById("table_id");
    tr = table.getElementsByTagName("tr");
    //array to hold filters
    filters = [];

    //loop through inputs and add value for all checked to filters
    for (i = 0; i < inputs.length; i++) {
      input = inputs[i];
      if (input.checked) {
        filters.push(input.value);
      }
    }

    //loop through each row in table
    for (r = 0; r < tr.length; r++) {
      //get column to compare to, in this case the 5th column
      td = tr[r].getElementsByTagName("td")[4];
      if (td) {
        //get value of the column
        txtValue = td.textContent || td.innerText;
        //check if column value is the filters array
        //or if filters array is empty, show all rows
        if (filters.indexOf(txtValue) > -1 || filters.length == 0) {
          //true, show row
          tr[r].style.display = "";
        } else {
          //false, hide row
          tr[r].style.display = "none";
        }
      }
    }

  }
</script>


<!-- Area checkbox -->
<!-- <script>
  // Area checkbox
  function filter_area() {
    //declare variables
    var inputs, input, filters, table, tr, td, i, r;
    //get all checkbox inputs
    inputs =...