<div class="main-content">
  <div class="container">
    <h2>Monthly Expense</h2>

    <form id="expenseForm">
      <div class="form-group">
        <label for="rent">Rent:</label>
        <input type="number" id="rent" name="rent" min="0" step="0.01">
      </div>
      
      <div class="form-group">
        <label for="salaries">Salaries:</label>
        <input type="number" id="salaries" name="salaries" min="0" step="0.01">
      </div>
      
      <div class="form-group">
        <label for="utilities">Utilities:</label>
        <input type="number" id="utilities" name="utilities" min="0" step="0.01">
      </div>
      
      <div class="form-group" style="display: none;">
        <label for="tax">Tax:</label>
        <input type="number" id="tax" name="tax" min="0" step="0.01">
      </div>
      
      <div class="form-group">
        <label for="otherExpenses">Other Expenses:</label>
        <input type="number" id="otherExpenses" name="otherExpenses" min="0" step="0.01">
      </div>

      <button type="submit">Save</button>
    </form>

    <div class="message" id="message"></div>

    <!-- Expense List Table -->
    <h2>All Monthly Expenses</h2>
    <table id="expenseTable">
      <thead>
        <tr>
          <th>Rent</th>
          <th>Salaries</th>
          <th>Utilities</th>
          <th>Tax</th>
          <th>Other Expenses</th>
          <th>Total</th>
        
        </tr>
      </thead>
      <tbody id="expenseTableBody">
        <!-- Expenses will be dynamically added here -->
      </tbody>
    </table>
  </div>
</div>
<script src="./js/monthlyExpense.js"></script>
</body>
</html>
