Query string add function

by defaye

HTML

<form action="form.php" method="post">
    <fieldset>
        <legend>Query string</legend>
        <div class="query_string">
            <div class="parameter">
                <label for="parameter_1">Parameter</label>
                <input type="text" id="parameter_1" required="required" />
            </div>
            <div class="argument">
                <label for="argument_1">Argument</label>
                <input type="text" id="argument_1" required="required" />
            </div> <a href="#" class="add_query_string">➕</a>

        </div>
    </fieldset>
</form>

JavaScript

$(document).ready(function () {

    var x = 1;

    $(".add_query_string").click(function (e) {
        e.preventDefault();
        x++;
        $('\
            <div class="query_string">\
                <div class="parameter">\
                    <label for="parameter_' + x + '">Parameter</label>\
                    <input type="text" id="parameter_' + x + '" required="required"/>\
                </div>\
                \
                <div class="argument">\
                    <label for="argument_' + x + '">Argument</label>\
                    <input type="text" id="argument_' + x + '" required="required"/>\
                </div>\
                \
                <a href="#" class="remove_query_string">➖</a>\
            </div>').insertAfter(".query_string:last");
    });

    $("form").on("click",".remove_query_string",function (e) {
        e.preventDefault();
        $(this).parent("div").remove();
        x--;
    });
    
});