JSFiddle - React, Tailwind, and code Playground

by Seokjun Hong

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 table = $('.outer-table > tbody > tr:last').clone();
  $(table).find('.sp-replacer').remove();
  $('.outer-table > tbody').append(table);
  $(".basic").spectrum({});

//  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
  
});