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>
                <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>
    </div>
</div>
</form>

JavaScript

function addRow(e){
	let row = e.target.parentElement.cloneNode(true)
  row.querySelector('.btn-add').setAttribute('onclick', 'deleteRow(event)')
  row.querySelector('.btn-add').innerText = '-'
  row.querySelector('.btn-del')
  e.target.parentElement.parentElement.appendChild(row)
}
function deleteRow(e){
	e.target.parentElement.remove();
}