JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div> First Dropdown:
      <select class="status" id="dropdown1" name="dropdown1">
        <option>Not Started</option>
        <option>In progress</option>
        <option>Finished</option>
      </select>
    </div>
    <div>
      <form>
        <input type="button" class="add-row" value="Add Row">
        <input type="button" class="load" value="Enter">
      </form>
      <table id='tablemain' class="table">
        <thead>
          <tr>
            <th>SNo</th>
            <th>Name</th>
            <th>Assigned Task</th>
            <th>Due Date</th>
            <th>Status</th>
            <th>Comments</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>

JavaScript

var status;
var sno = [];
var load;
var no_rows = 0;
var row;
var mainArr = [];
var tmpArr = [];

function loadValues() {
  var mainTable = $('#tablemain');
  var tr = mainTable.find('tbody tr');
  console.log(tr.length)
  tr.each(function() {
    tmpArr = [];
    $(this).find('td').each(function() {

      var values = $(this).find('input, select').val();
      tmpArr.push(values);

    });
    mainArr.push(tmpArr);
  });
  console.log(mainArr);
}


$(document).ready(function() {
  $(".add-row").click(function() {
    row = "<tr id=tasklist><td>" + "<input type=text class=sno></input>" + "</td><td>" + "<input type=text class=pname></input>" + "</td><td>" + "<input type=text class=task></input>" + "</td><td>" + "<input type=text class=date></input>" + "</td><td>" + "<select class=status id=dropdown2 name=dropdown2><option >Not Started</option></select>" + "</td><td>" + "<input type=text class=comment></input>" + "</td></tr>";
    $("table > tbody").append(row);
    $('.date').datepicker();
    //  $('.sno').css("background-color","blue");  
    i++;
  });

  $('.load').click(function() {
    loadValues();
  });
});

$('select[name=dropdown1]').on('change', function() {
  $("select[name=dropdown2]").find('option').show();
  var from = $(this).find(":selected").val();
  $("select[name=dropdown2]").val('');
  if (form != "") {
    $("select[name=dropdown2]").find('option:contains("' + form + '")').hide();
  }
})