JSFiddle - React, Tailwind, and code Playground

by whtevn

HTML

<h1>Design Item List</h1>
    <table id="design_item_list" class="line_item_tracker">
      <tr>
        <th>To Bill</th>
        <th>Date</th>
        <th># Hours</th>
        <th>Subtotal</th>
      </tr>
      <tr class="line_item base_item" id="design_item_0">
        <td><input type="checkbox" class="to_bill" name="design_item[0][to_bill]" /></td>
        <td><input type="text" class="datepicker" name="design_item[0][date]" /></td>
        <td><input type="text" size="5" class="number" name="design_item[0][num]" /> X <span class="multiplier" >95</span></td>
        <td>$<span class="line_item_cost"></span></td>
      </tr>
      <tbody class="line_item_area">
      </tbody>
      <tr>
        <td>
          <input type="button" class="add_line_item" value="Add line item" />
        </td>
        <td colspan="4">
          Design Item Total: $<span class="item_total"></span>
        </td>
      </tr>
    </table>

<h1>Line Item List</h1>
    <table id="line_item_list" class="line_item_tracker">
      <tr>
        <th>Description</th>
        <th>Cost</th>
      </tr>
      <tr class="line_item base_item" id="line_item_0">
        <td><input type="text" name="line_item[0][description]" /></td>
        <td><input type="text" name="line_item[0][cost]" class="line_item_cost"/></td>
      </tr>
      <tbody class="line_item_area">
      </tbody>
      <tr>
        <td>
          <input type="button" class="add_line_item" value="Add line item" />
        </td>
        <td colspan="4">
          Line Item Total: $<span class="item_total"></span>
        </td>
      </tr>
    </table>

    <h1>Line Item To Bill List</h1>
    <table id="line_item_to_bill_list" class="line_item_tracker">
      <tr>
        <th>To Bill</th>
        <th>Description</th>
        <th>Cost</th>
      </tr>
      <tr class="line_item base_item" id="line_item_0">
        <td><input type="checkbox" class="to_bill" name="line_item_to_bill[0][to_bill]" /></td>
        <td><input type="text"...

CSS

table { margin-bottom: 50px; }
      .datepicker {width:80px;}

JavaScript

$(document).ready(function(){
        startup_tracker();
        $(".datepicker").datepicker();
      });

      function startup_tracker(){
        $(".add_line_item").click(add_line_item);
        $(".line_item_tracker").each(function(){
          next_num = $(this).find(".line_item").size();
          $(this).append("<input type='hidden' class='store_tracker_number' value='"+next_num+"' />");
        });

        $(".base_item").find("input").each(function(){
          if($(this).is(":checkbox")){
            $(this).change(update_tracker_total);
          }else{
            $(this).keyup(update_tracker_total);
          }
        });
      }

      function add_line_item(){
        tracker_area = $(this).closest(".line_item_tracker");
        line_item_area = tracker_area.find(".line_item_area");
        new_item = tracker_area.find(".base_item").clone();

        var tracker_number_element = tracker_area.find(".store_tracker_number");

        var tracker_number = tracker_number_element.val();

        new_item.find("input").each(function(){
          if($(this).is(":checkbox")){
            $(this).removeAttr("checked");
            $(this).change(update_tracker_total);
          }else{
            if(!$(this).hasClass("multiplier")){
              $(this).val("");
              $(this).keyup(update_tracker_total);
            }
          }
          old_name = $(this).attr("name");
          new_name = old_name.replace(/[0-9]+/, tracker_number);
          $(this).attr("name", new_name);
        });
        if($(".line_item_cost", new_item).is(":input")){
          $(".line_item_cost", new_item).val('');
        }else{
          $(".line_item_cost", new_item).text('');
        }


        $(".line_item_cost", this).text('');
        new_item.removeClass("base_item");
        new_item_id = tracker_area.attr("id").replace("_list", '');
        new_item.attr("id", new_item_id+"_"+tracker_number);

        line_item_area.append(new_item);
       ...