Adding an HTML div with input and label using javacript

I have an HTML form, the user can add a name, and if there is an additional name required to be added to click on the button and a new div with input and label inside it.

Here is the HTML:

                <div class="form-outline mb-4">
                  <input type="text" id="ownerName1" class="form-control" />
                  <label class="form-label" for="typeText"
                    >Name of Owner(s)/Major Shareholders:</label
                  >
                </div>
                <button
                  onclick="newShareholder()"
                  type="button"
                  class="mb-2 btn btn-primary btn-sm ripple-surface"
                >
                  Add Shareholders
                </button>

I am trying to write a script to create the div and inside it the input and label. I want to place the new div above the button.
here is what I have tried:

              <script>
                var buttons = 2;

                function newShareholder() {
                  var div = document.createElement("div");
                  div.className = "form-outline mb-4";

                  var input = document.createElement("input");
                  input.id = "ownerName" + buttons;
                  input.className = "form-control";
                  document.body.appendChild(input);
                  buttons++;
                  var label = document.createElement("label");
                  label.className = "form-label";
                  label.innerHTML = "Name of Owner(s)/Major Shareholders:";
                  div.innerHTML = input;
                  document.body.appendChild(div);
                }
              </script>

I am new to javascript so I search for a similar answer but I didn't grasp on how it works so if someone could provide explanation.

My current output is showing the additional input after the button and it is not inheriting the correct class.

here is a sample of the required output after clicking the add button:

                <!-- Original HTML -->
                <div class="form-outline mb-4">
                  <input type="text" id="ownerName1" class="form-control" />
                  <label class="form-label" for="typeText"
                    >Name of Owner(s)/Major Shareholders:</label
                  >
                </div>


                <!-- After clicking the add button 1st time -->
                <div class="form-outline mb-4">
                  <input type="text" id="ownerName2" class="form-control" />
                  <label class="form-label" for="typeText"
                    >Name of Owner(s)/Major Shareholders:</label
                  >
                </div>




                <!-- After clicking the add button 2nd time -->
                <div class="form-outline mb-4">
                  <input type="text" id="ownerName3" class="form-control" />
                  <label class="form-label" for="typeText"
                    >Name of Owner(s)/Major Shareholders:</label
                  >
                </div>