Add and Remove Row - Method 1

by Atif_Hanif

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <button type="button" class="btn btn-primary btn-md d-block ms-auto mt-2 add_button">Add</button>
    </div>
        </div>
  <div class="main-div"></div>
</div>

JavaScript

$(document).ready(function () {
    var max_div = 5; //maximum input boxes allowed
    var wrapper = $(".main-div"); //Fields wrapper
    var add_button = $(".add_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function (e) { //on add input button click
        e.preventDefault();
        if (x < max_div) { //max input box allowed
            x++; //text box increment
            $(wrapper).append(
            '<div class="div_wrap mt-3">' +
                '<div class="row">' +
                    '<div class="col-sm-12 col-md-4">' +
                        '<div class="form-group">' +
                            '<label for="inputGroup-1_1">Title</label>' +
                            '<input id="txtcommitteName" class="form-control" type="text" placeholder="Title" maxlength="255">' +
                        '</div>' +
                    '</div>' +
                    '<div class="col-sm-12 col-md-4">' +
                        '<div class="form-group">' +
                            '<label for="inputGroup-1_1">Target</label>' +
                            '<input id="txtcommitteName" class="form-control" type="text" placeholder="Target" maxlength="255">' +
                        '</div>' +
                    '</div>' +
                    '<div class="col-sm-12 col-md-4">' +
                        '<div class="form-group">' +
                            '<label for="inputGroup-1_1">Result</label>' +
                            '<input id="txtcommitteName" class="form-control" type="text" placeholder="Result" maxlength="255">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<a href="#" class="btn btn-danger d-block mx-auto remove_div mt-3 w-25">Remove</a>' +
            '</div>');
        }
    });

    $(wrapper).on("click", ".remove_div", function (e) { //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
   ...