       currentCategory = category
   element.empty()
   element.append """<option value="">Select an item...</option>"""
-  for {id, description} in currentCategory.items
-    element.append """<option value="#{id}">#{description}</option>"""
+  for {id, description, current_quantity, requested_quantity} in currentCategory.items
+    element.append """<option value="#{id}" data-current-quantity="#{current_quantity}" data-requested-quantity="#{requested_quantity}">#{description}</option>"""
+
+populateQuantity = (current_quantity, requested_quantity, element) ->
+  available_quantity = parseInt(current_quantity) - parseInt(requested_quantity)
+  element.val("")
+  element.attr("placeholder", available_quantity + " available")
 
 addNewOrderRow = ->
   currentNumRows = $("#new-order-table tbody").find("tr").length

        </select>
      </td>
      <td>
        <select class="quantity form-control row-#{currentNumRows}">
          <option value="">0</option>
        </select>
      </td>
    </tr>
  """)

  item_element = $(@).parents(".new-order-row").find ".item"
  populateItems $(@).val(), item_element

$(document).on "change", ".new-order-row .item", ->
  quantity_element = $(@).parents(".new-order-row").find ".quantity"
  selected = $(@).find('option:selected')
  populateQuantity selected.data("current-quantity"), selected.data("requested-quantity"), quantity_element

$(document).on "page:change", ->
  addNewOrderRow() if $("#new-order-table").length > 0
