title: How can I add multiple inputs to this <div> using javascript function?
body: <p>For context, this is a Django based application I am developing. I am using this script within an HTML document. When a button is pressed, it runs the following function. The purpose is to create a  element, and then include a couple of inputs and so forth. The problem that I am having is that when I add one input to the div using the following append statements, if I try to add ANOTHER input type (checkbox for example) it over rides the first input (search). How can I append multiple inputs within the script? I will need a total of 3 different inputs.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var counter = 1; //limits amount of transactions
      function addElements() {
          if (counter &lt; 5) //only allows 4 additional transactions
          {
              let div = document.createElement('div');
              div.id = 'row' + counter;
              document.body.appendChild(div);
  
              let input = document.createElement('input');
              input.id='search'+counter;
              input.type = 'search';
              input.placeholder = 'Search by product name'
              div.appendChild(input);
  
              let button = document.createElement('button');
              button.id ='button'+counter;
              button.type = 'QRscan';
              button.innerText = 'QR scan'
              div.appendChild(button);
          }
  
          counter++
          if (counter &gt;= 6) {
              alert("You have reached the maximum transactions.")
          }
      }
      
      addElements();</code></pre>
  </div>
  </div>
  </p>