How to create Dynamic html elements with jquery and bootstrap??

step 1: You must have a running boostrap and jquery in the your code

kindly check the link here

Add the button in order to create dynamic elements from where we call a function to create dynamic elements

 <button class="btn btn-success" onclick="add_nc_data();" type="button">Add</button>

  a button like this will be created

Step 2: we need to create the an html element where we can create or append the dynamic elements

in my  case i am using a table where i can append html elements dynamically i have created a sample list of one element by default

<div class="table-responsive">
    <table id="lt_trans" class="table table-bordered table-striped">
      <thead>
        <tr>
          <th scope="col">Sr No.</th>
          <th scope="col">Feeder</th>
          <th scope="col">Sold Out</th>
          <th scope="col">Assesment</th>
          <th scope="col">Collection</th>                
          <th scope="col">Arrears</th>
          <th scope="col">Adjustment</th> 
          <th scope="col">Add</th>                               
         </tr>
      </thead>
      <tbody>
          <tr><td>1</td>
          <td><select  id="feederlist" class="col-sm-10 custom-select custom-select-sm feederid1" ></select></td>
          <td><input type="text" id="soldoutunts1" class="form-control" autocomplete="off" placeholder="Sold Out Units:"></td>
          <td><input type="text" id="assesment1" class="form-control" autocomplete="off" placeholder="Assesment Units:"></td>
          <td><input type="text" id="collection1" class="form-control" autocomplete="off" placeholder="Collection:"></td>                
          <td><input type="text" id="arrears1" class="form-control" autocomplete="off" placeholder="Arrears:"></td>
          <td><input type="text" id="adustment1" class="form-control" autocomplete="off" placeholder="Adjustment Units:"></td>
          <td><button type="button" class="btn btn-success" onclick="add_nc_data();">Add</button></td>                                   
          </tr>
      </tbody>
    </table>

                  <div class="d-flex justify-content-center">
                  <button type="button" id="applyfilterbtn" class="btn btn-primary" onclick="submit();">Submit</button> &nbsp; &nbsp;
                  <button type="button" id="removefilterbtn" class="btn btn-warning" onclick="location.reload();">Reset</button>
                  </div>

</div>

Step 3: we need to create a function in order to append the dynamic elements

in my  case i am using a table where i can append html elements dynamically

Step 4: We are creating a function to create dynamic html elements on the fly

the function is as follows

<script type="text/javascript">
function add_nc_data(){
var html = '<tr>';
              html+='<tr><td>'+i+'</td>';
              html+='<td><select id="feederlist'+i+'"  class="col-sm-10 custom-select custom-select-sm feederid'+i+'" ></select></td>';
              html+='<td><input type="text" id="soldoutunts'+i+'" class="form-control" autocomplete="off" placeholder="Sold Out Units:"></td>';
              html+='<td><input type="text" id="assesment'+i+'" class="form-control" autocomplete="off" placeholder="Assesment Units:"></td>';
              html+='<td><input type="text" id="collection'+i+'" class="form-control" autocomplete="off" placeholder="Collection:"></td>';                
              html+='<td><input type="text" id="arrears'+i+'" class="form-control" autocomplete="off" placeholder="Arrears:"></td>';
              html+='<td><input type="text" id="adustment'+i+'" class="form-control" autocomplete="off" placeholder="Adjustment Units:"></td>';
              html+='<td><button type="button" class="btn btn-success" onclick="add_nc_data();">Add</button></td>';                                   
html += '<tr>';
$('#lt_trans').append(html); 
$('select#feederlist  option').clone().appendTo('#feederlist'+i+'');

}
</script>

what this does is that it function add_nc_data() will append the element to the table with id #lt_trans

the function is called whenever the add button is clicked

  a button like this will be created

the final working is under the screen shot

before add button is pressed

  after add button is pressed

you can see 3 html elements are created dynamically