Dynamic add/remove form elements

by chitranshsaurabh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<div class="container">
            <div class="row justify-content-center align-items-center">
                <div class="col-10 col-md-10 col-lg-8">
                    <form>
                        <div class="form-row" style="padding-top: 50px;" id="someId">
                            <div class="form-group col-md-4">
                                <select class="selectpicker form-control single-select" placeholder="Select an Option..." required>
                                    <option></option>
                                    <option>Mustard</option>
                                    <option>Ketchup</option>
                                    <option>Barbecue</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <input type="password" class="form-control" placeholder="">
                            </div>
                            <div class="form-group col-md-1">
                                <button type="button" class="btn btn-success" onclick="addFormElements(this)">Add</button>
                            </div>
                            <div class="form-group col-md-1">
                                <button type="button"...

CSS

.bootstrap-select.form-control {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, 
                box-shadow .15s ease-in-out;
}

JavaScript

function addFormElements(current) {
    $(current).parent().parent().append($(current).parent().parent().html());
}

function removeFormElements(current) {
    $(current).parent().parent().remove();
}