Add new row (html form) after click 'Add row' button

Here is the code that perfectly working.

 <div class="jumbotron jumbotron-fluid" id="dataAdd">
        <div class="container">
            <div class="form-row">
              <div class="form-group col-md-7">
                <label for="inputName1"></label>
                <input type="Name" class="form-control" id="inputName1" placeholder="Name" v-model="name">
              </div>
              <div class="form-group col">
                <label for="inputPassword4"></label>
                <input type="name" class="form-control" id="inputPassword1" placeholder="Position" v-model="position">
              </div>
            </div>
            

    </div>
     <button id="btn">Add row</button>

HTML Code input start with one.

$("#btn").click(function(){

var len=$('#dataAdd .container .form-row').length+1;

//if(len>1)

 $("#dataAdd .container:last").append(' <div class="form-row">'+
                  '<div class="form-group col-md-7">'+
                   ' <label for="inputName'+len+'"></label>'+
                   ' <input type="Name" class="form-control" id="inputName'+len+'" placeholder="Name" v-model="name">'+
                 ' </div>'+
                 ' <div class="form-group col">'+
                 '   <label for="inputPassword4"></label>'+
                 '   <input type="name" class="form-control" id="inputPassword'+len+'" placeholder="Position" v-model="position">'+
                 ' </div>'+
               '</div>');

               });
             
    });

JavaScript Code added HTML in last form-control.

I have Created a working Example you can check here

the more simple is to use a DOMParser

const DomParser = new DOMParser()
  ,   myForm = document.getElementById('my-form')
  ,   bt_Add = document.getElementById('btn-add')
  ;
function newRow(numRow)
  {
  let row_N = `
    <div class="form-row">
      <div class="form-group col-md-7">
        <label for="inputName${numRow}"></label>
        <input type="Name" class="form-control" id="inputName${numRow}" placeholder="Name ${numRow}">
      </div>
      <div class="form-group col">
        <label for="inputPassword${numRow}"></label>
        <input type="name" class="form-control" id="inputPassword${numRow}" placeholder="Position ${numRow}">
      </div>
    </div>`
  return (DomParser.parseFromString(row_N, 'text/html')).body.firstChild
  }
bt_Add.onclick =()=>
  {
  let rowCount = myForm.querySelectorAll('div.form-row').length
  myForm.appendChild(newRow(++rowCount))
  }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<h1 class="h3 mb-4 text-gray-800">Requirement Validation Principles</h1>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <form action="xx" id="my-form">
        <div class="form-row">
          <div class="form-group col-md-7">
            <label for="inputName1"></label>
            <input type="Name" class="form-control" id="inputName1" placeholder="Name 1">
          </div>
          <div class="form-group col">
            <label for="inputPassword1"></label>
            <input type="name" class="form-control" id="inputPassword1" placeholder="Position 1">
          </div>
        </div>

      </form>
    </div>

    <button id="btn-add">Add row</button>

    <!-- /.container-fluid -->

  </div>

Useful links: appendChild querySeleectorAll

see also : What does ${} (dollar sign and curly braces) mean in a string in Javascript?

Instead of using InsertRow() you can alternatively put the button outside your container (the div containing the "container" class) and then use javascript to create your elements.

After all elements are created, you can simply append them to follow your desired structure.

const button = document.getElementById(#btn);

button.addEventListener('click', addRow);

function addRow(event) {
  const container = document.querySelector('.container');

  const row = document.createElement('div');
  row.classList.add('form-row');

  const group = document.createElement('div');
  group.classList.add('form-group');
  group.classList.add('col-md-7'); // Adjust after need.
  
  const label = document.createElement('label');
  label.setAttribute('for', 'myNewInputName');

  const input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.classList.add('form-control');
  input.setAttribute('placeholder', 'My new placeholder');


  // Assemble our structure.
  group.appendChild(label);
  group.appendChild(input);
  row.appendChild(group);
  container.appendChild(row);
}

Here you got a working sandbox of this example: https://codesandbox.io/s/busy-lovelace-9jw2b?file=/src/index.js.

Useful links:

appendChild

createElement

querySeleector

Turns out there's a Javascript method called insertRow().

You'd just need to get a handle on your form by giving it and ID and then accessing that in Javascript:

var table = document.getElementById("[the ID I gave my form");

after that, use the insertRow() method on that table variable and give it a position. Then add cells to the row you just created using insertCell():

var row = table.insertRow(0);
var cell1 = row.insertCell(0);