JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<form action="#" method="POST" class="form-horizontal">
	<div class="param mt-3">
		<div class="row">
			<div class="col-12"><div class="alert alert-primary text-center" id="totals"><strong>1</strong></div></div>
			<div class="col-12"><textarea rows="5" class="form-control mb-3" type="text" name="rabota[]" placeholder="Наименование видов работ"></textarea></div>
		</div>
		<div class="row">
			<div class="col-12 mb-2 text-center"><strong>Материал</strong></div>
		</div>
		<div class="row">
			<div class="col-12 mater">
				<div class="row list" id="material_row">
					<div class="col-8"><input class="form-control mb-3" type="text" name="mater_name[]" placeholder="Название"></div>
					<div class="col-2"><input class="form-control mb-3" type="text" name="mater_units[]" placeholder="Количество"></div>
					<div class="col-2"><input class="form-control mb-3" type="text" name="mater_price[]" placeholder="Цена за ед."></div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-12">
				<input id="add_material" class="btn btn-primary btn-lg btn-block" type="button" value="Добавить Материал">
			</div>
		</div>
		<div class="row"><div class="col-12"><hr></div></div>
	</div>
	<div class="row" id="next">
		<div class="col-6">
			<input class="btn btn-primary btn-lg btn-block" type="button" value="Добавить поле" id="form_status_added">
		</div>
		<div class="col-6">
			<button name="updates" class="btn btn-primary btn-lg btn-block">Обновить</button>
		</div>
	</div>
</form>

CSS

body {
  padding: 8px;
  margin: auto;
  max-width: 900px;
}

JavaScript

var template = document.querySelector(".param").cloneNode(true);
addEventListener("click", ({ target }) => {
	switch(target.id) {
  	case "form_status_added":
    	var elemCount = document.querySelectorAll(".param").length;
      var node = template.cloneNode(true);
      node.querySelector("#totals").textContent = elemCount + 1;
      document.querySelector("#next").before(node);
    	break;
      
      case "add_material":
      var node = target.closest(".param").querySelector("#material_row:last-of-type");
      node.after(node.cloneNode(true));
    	break;
  }
});