         </button>
       </td>
     </tr>
-  """)
+  """
+
   category = newRow.find ".category"
   populateCategories category
-  $("#new-order-table tbody").append newRow
+  $("#order-table tbody").append newRow
 
-printOrder = ->
-  window.print()
-
-$(document).on "click", ".add-item", (event) ->
-  event.preventDefault()
-  event.stopPropagation()
-  $("#add_inventory_modal").modal("show")
-
-$(document).on "click", "#add-item-row", (event) ->
-  event.preventDefault()
-  addNewOrderRow()
-
-$(document).on "click", ".delete-row", (event) ->
-  event.preventDefault()
-  $(@).parents("tr:first").remove()
-  addNewOrderRow() if $("#new-order-table tbody tr").length == 0
-
-$(document).on "click", "#print-order", (event) ->
-  printOrder()
-
-$(document).on "click", "#add-tracking-number", (event) ->
-  event.preventDefault()
+addTrackingRow = ->
   newRow = $ """
     <tr>
       <td>

    element.append """<option value="#{id}" data-current-quantity="#{current_quantity}" data-requested-quantity="#{requested_quantity}">#{description}</option>"""

populateQuantity = (selected, element) ->
  if selected.val() == ""
    element.attr("placeholder", "Select an Item...")
    element.removeAttr("data-guard data-guard-int-min data-guard-int-max")
    element.attr("data-guard", "required")
  else
    available_quantity = selected.data("current-quantity") - selected.data("requested-quantity")
    element.attr("placeholder", "#{available_quantity} available")
    element.attr("data-guard", "required int")
    element.attr("data-guard-int-min", "1").data("guard-int-min", 1)
    element.attr("data-guard-int-max", available_quantity).data("guard-int-max", available_quantity)

  element.val("").clearErrors()

addNewOrderRow = ->
  currentNumRows = $("#new-order-table tbody").find("tr").length
  newRow = $("""
    <tr class="new-order-row">
      <td>
        <div class="form-group">
          <select class="category form-control row-#{currentNumRows}" data-guard="required">
            <option value="">Select a category...</option>
          </select>
        </div>
      </td>
      <td>
        <div class="form-group">
          <select name="order_detail[#{currentNumRows}][item_id]" class="item form-control row-#{currentNumRows}" data-guard="different required">
            <option value="">Select an item...</option>
          </select>
        </div>
      </td>
      <td>
        <div class="form-group">
          <input name="order_detail[#{currentNumRows}][quantity]" class="quantity form-control row-#{currentNumRows}" placeholder="Select an Item..." data-guard="required" />
        </div>
      </td>
      <td>
        <button class="pull-right btn btn-danger btn-xs delete-row">

  $("#shipments-table tbody").append newRow
  $("#shipments-table").show()

printOrder = ->
  window.print()

$(document).on "click", ".add-item", (event) ->
  event.preventDefault()
  event.stopPropagation()
  $("#add_inventory_modal").modal("show")

$(document).on "click", "#add-item-row", (event) ->
  event.preventDefault()
  addOrderRow()

$(document).on "click", ".delete-row", (event) ->
  event.preventDefault()
  $(@).parents("tr:first").remove()
  addOrderRow() if $("#order-table tbody tr").length == 0

$(document).on "click", "#print-order", (event) ->
  printOrder()

$(document).on "click", "#add-tracking-number", (event) ->
  event.preventDefault()
  addTrackingRow()

$(document).on "change", ".order-row .category", ->
  item_element = $(@).parents(".order-row").find ".item"
  populateItems $(@).val(), item_element

$(document).on "change", ".order-row .item", ->
  quantity_element = $(@).parents(".order-row").find ".quantity"
  quantity_available_element = $(@).parents(".order-row").find ".quantity-available"
  selected = $(@).find('option:selected')
  populateQuantity selected, quantity_element
  populateQuantityAvailable selected, quantity_available_element

$(document).on "turbolinks:ready", ->
  addOrderRow() if $("#order-table").length > 0
