jQuery101

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="jQuery-Task 101" />
    <meta name="author" content="Deyan Ivanov" />
    <meta name="keywords" content="jQuery, Task, 101" />
    <title>jQuery-Task 101</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://kit.fontawesome.com/47ba4a2d2a.js"></script>
    <link rel="stylesheet" href="jQuery101.css" />
    <script src="./jQuery101.js"></script>
</head>
<body>
<header>
    <div class="div-header">
        <h6 class="invoice">
            Invoice Details <i class="fas fa-tools icon"></i>
        </h6>
    </div>
    <div class="client-div div-header">
        <h6 class="client">Client Name</h6>
    </div>
    <div class="name-div div-header">
        <h6 class="name">Deyan Ivanov</h6>
    </div>
    <div class="date-div div-header">
        <h6 class="date">27/10/2021</h6>
    </div>
</header>
<div class="container-fluid container-products d-flex">
    <div class="row">
        <div class="col-xl-12 col-md-12 col-xs-12 button-col">
            <div class="button-div">
                <input type="button" value="Add New Product" class="btnAdd" />
            </div>
        </div>
        <div class="col-xl-12 col-md-12 col-xs-12 col-product">
            <table class="table product-table">
                <tr class="multTr">
                    <td scope="col">
                        <label for="productName">Product Name</label>
                        <input type="text" value="" class="productName" />
                    </td>

                    <td scope="col">
                        <label for="quantity">Quantity</label>
                        <input type="number" value="" class="quantity" />
                    </td>

                    <td scope="col">
                        <label for="price">Price</label>
                        <input type="number" value="" class="price" />
                    </td>

                    <td scope="col">
                        <label for="productName" class="total-label">Total</label>
                        <input type="text" value="" class="total" disabled />
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-xl-12 col-md-12 col-xs-12 discount-col">
            <label for="discount" class="discount-label">Discount %:&nbsp;</label>
            <input type="number" value="" class="discount" />
        </div>
    </div>
</div>
<div class="container-fluid container-all-total d-flex">
    <div class="row row-all-total">
        <div class="col-xl-12 col-md-12 col-xs-12 d-flex col-all-total">
            <table class="table total-table">
                <tr>
                    <td scope="col">
                        <label for="sub-total" class="sub-total-label">Sub Total</label>
                        <input type="text" value="" class="sub-total" disabled />
                    </td>
                </tr>
                <tr>
                    <td scope="col">
                        <label for="total-discount" class="total-discount-label"
                        >Total Discount</label
                        >
                        <input type="text" value="" class="total-discount" disabled />
                    </td>
                </tr>
                <tr>
                    <td scope="col">
                        <label for="all-total" class="all-total-label">Total All</label>
                        <input type="text" value="" class="all-total" disabled />
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<footer>
    <p>Code with love &lt;3</p>
</footer>
</body>
</html>