How do I make my button stay at the bottom of the textbox everytime I press the add experience button to add another textbox?

<div class="form-group">
    <p>
        <h6>Work Experiece</h6>
        </p>
        <textarea class="form-control" id="form-control-10"rows="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>
    <div class="col-md-4" id=field_div>
    <input type="button" class="ticker-btn1 add-exp" value="Add Experience" onclick="add_field();">
    </div>

function add_field() {
  var total_text = document.getElementsByClassName("form-control");
  total_text = total_text.length   1;
  document.getElementById("field_div").innerHTML = document.getElementById("field_div").innerHTML  
  "<textarea class='form-control add-exp add-textbox' rows='5' id='form-control-"   total_text   "'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>";
}

CodePudding user response：

Create a new div section over the existing text area and add your new text areas inside the new div

Here is the solution

function add_field() {
  var total_text = document.getElementsByClassName("form-control");
  total_text = total_text.length   1;
  document.getElementById("text_area_section").innerHTML  =
  "<textarea class='form-control add-exp add-textbox' rows='5' id='form-control-"   total_text   "'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>";
}

<div class="form-group">
    <p>
       <h6>Work Experiece</h6>
    </p>
    <div id="text_area_section">
        <textarea class="form-control" id="form-control-10"rows="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>
    </div>    
    <div class="col-md-4" id=field_div>
        <input type="button" class="ticker-btn1 add-exp" value="Add Experience" onclick="add_field();"/>
    </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

note:- As CSS is not available, it is not applied in this solution. modify your CSS for the perfect view