JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th rowspan="3" style="text-align: center;border:1px solid #e3ebf3;">Objective No.</th>
                          <th rowspan="3" style="text-align: center;border:1px solid #e3ebf3;">My Performance Objective</th>
                          <th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Weightage<br>100%</th>
                          <th colspan="5" style="text-align: center; border:1px solid #e3ebf3;">Standards of Performance</th>
                          <th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Outcome</th>
                          <th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Score</th>
                        </tr>
                         <tr colspan="5">
                            <th style="text-align: center; border:1px solid #e3ebf3;">1</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">2</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">3</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">4</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">5</th>
                        </tr>
                        <tr colspan="5">
                            <th style="text-align: center; border:1px solid #e3ebf3;">Unsatisfactory</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">Partially <br>Meets<br> Objectives</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">Fully<br> Meets<br> Objectives</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">Exceeds <br> Objectives</th>
                            <th style="text-align: center; border:1px solid...

CSS

body
{
    counter-reset: Count-Value;     
}
table
{
    border-collapse: separate;
}
tr td:first-child:before
{
  counter-increment: Count-Value;   
  content: "" counter(Count-Value);
}

JavaScript

$("#newobj").click(function(){
      var addcontrol="<tr>"
      addcontrol+="<td></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="</tr>"
   $("table tbody").append(addcontrol);
                   });
  //alert("Cannot add more than 8 objectives");
   $(document).on('click', '.remove', function() {
        $(this).parents('tr').remove();

});