JSFiddle - React, Tailwind, and code Playground

HTML

<form method="POST" action="/fixed" class="form" role="form">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <h3>Параметры кредита</h3>
            <div class="row">
                {{ form.csrf_token }}
                <div class="form-group col-md-4">{{ wtf.form_field(form.notional, class="form-control", placeholder="Сумма в руб") }}</div>
                <div class="form-group col-md-4">{{ wtf.form_field(form.mult) }}</div>
                <div class="form-group col-md-3">{{ wtf.form_field(form.currency) }}</div>
            </div>
            <div class=row>
                <label>bla</label>
                <input class="form-control" id="paydate" name="paydate" type="text" value="123123">
                <div class="form-group col-md-4">{{ wtf.form_field(form.start_date, class="form-control", placeholder="ГГГГ-ММ-ДД") }}</div>
                <div class="form-group col-md-4">{{ wtf.form_field(form.payment, class="form-control", placeholder="Сумма") }}</div>
                <div class="btn-add" onclick="addRow(event)">+</div>
            </div>
            <div>
            Bla
            </div>
        </div>
    </div>
</div>
</form>
<style>
.btn-add,
.btn-del{
  color:white;
  padding:.5rem;
  border-radius:1rem;
  width:1rem;
}
.btn-add{background-color:lime;}
.btn-del{background-color:red;}
</style>

JavaScript

function addRow(e){
  let row = e.target.parentElement.cloneNode(true);
  [...row.querySelectorAll('label')].map(x=>x.remove());
  [...row.querySelectorAll('input')].map(x=>x.value = '')
  row.querySelector('.btn-add').setAttribute('onclick', 'deleteRow(event)')
  row.querySelector('.btn-add').innerText = '-'
  row.querySelector('.btn-add').className = "btn-del";
  e.target.parentElement.parentElement.insertBefore(row, e.target.parentElement.parentElement.children[e.target.parentElement.parentElement.children.length - 1])
}
function deleteRow(e){
	e.target.parentElement.remove();
}