Bootstrap 4
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <!-- Bootstrap -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"> <!-- Iconite -->
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css"> <!-- DataTables -->
<link rel="stylesheet" href="css/style.css"> <!-- custom CSS -->
<style></style></head>
<body>
<!--Bara de navigare cu link-uri catre alte aspecte ale site-ului -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<span class="navbar-brand mb-0 h1">Meniu</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="">Factură nouă <i class="far fa-file-alt"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="list.php">Afișare <i class="fas fa-bars"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="insert.php">Produs nou <i class="fas fa-plus-circle"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"...
CSS
/*Pentru navbar*/
body { padding-top: 70px; }
JavaScript
$(document).ready(function() {
$("#btnAddProdus").click(function() {
var formRow = $('<div class="form-row align-items-end">');
var removeButton = $('<div class="form-group col"><button type="button" id="BtnDelProdus" class="btn btn-danger"><i class="fas fa-times"></i></button></div>');
removeButton.click(function() {
$(this).parent().remove();
});
formRow.append('<div class="form-group col"><label for="codInput">Cod produs</label><input class="form-control" name="codInput" type="text"></div>');
formRow.append('<div class="form-group col"><label for="cantitateInput">Cantitate</label><input class="form-control" name="cantitateInput" type="text"></div>');
formRow.append('<div class="form-group col"><label for="pretInput">Preț unitar</label><input class="form-control" name="pretInput" type="text"></div>');
formRow.append(removeButton);
$("#divProduse").append(formRow);
});
});