JSFiddle - React, Tailwind, and code Playground

by KheKhe

HTML

<link rel="stylesheet" href="https://bgrins.github.io/spectrum/spectrum.css">
<script src="https://bgrins.github.io/spectrum/spectrum.js"></script>
<table class="outer-table">
  <tbody>

    <tr>
      <td colspan="3">
        <table class="inner-table">
          <tbody>
            <tr>
              <td>
                <p class="input-label">Name of Color </p>
                <input class="input-field color-name" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <p class="input-label">Outline Color </p>
                <input class="input-color-picker basic outline-color-picker" value="black" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <p class="input-label">Fill Color </p>
                <input class="input-color-picker basic fill-color-picker" value="black" type="text" />
              </td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td colspan="3">
                <button class="add-button">Add Color</button>
              </td>
            </tr>
          </tfoot>


        </table>
      </td>
    </tr>

    <!-- ------------------------------------------------- -->
    <!-- ------------------------------------------------- -->
    <!-- ------------------------------------------------- -->

    

  </tbody>



</table>

CSS

.outer-table tr {
  margin: 10px;
}

.inner-table {
  border: 2px solid yellow;
}

JavaScript

$(".basic").spectrum({});



$(document).on("click", ".add-button", function() {
  event.preventDefault();

  var parentTable = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
  var lastTableRow = parentTable.children('tbody').children('tr:last');

  //Adding the new row
  parentTable.children('tbody').append(lastTableRow.clone());

  //Reset lastRow variable 
  lastTableRow = parentTable.children('tbody').children('tr:last');
  //Reset the fields
  lastTableRow.find('table tbody tr td input').each(function() {
    $(this).val('');
  });


  //update numberOfRows variable
  var numberOfRows = parentTable.children('tbody').children('tr').length;
  //alert("numberOfRows:" + numberOfRows);//check
  
  
});