When appending div formatting changes

Question

I currently have the following layout.

        <div class="forminputs">
            <h4 class="mt-2">Ingredients:</h4>
            <div class="mt-2 row">
                <div class="mr-2">
                    <select class="custom-select custom-select-lg" id="measurements">
                        <option selected value="item">Item</option>
                        <option value="tablespoon">Tablespoon</option>
                        <option value="cup">Cup</option>
                    </select>
                </div>
                <div>
                    <input class="form-control-lg" type="text" placeholder="1"  maxlength="4" size="4">
                </div>

                <div class="col">
                    <input id='items' placeholder="Egg" class="form-control form-control-lg" type="text"
                           name="mytext[]">

                </div>

            </div>

        </div>

I then have a javascript function, that appends the same div when some one pushes the button. This works, but the styling is not the same.

<script>
   $(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".forminputs");

    var add_button = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div class="mt-2 row"><div class="mr-2"><select class="custom-select custom-select-lg" id="measurements'+ x +'"><option selected value="item">Item</option><option value="tablespoon">Tablespoon</option><option value="cup">Cup</option></select><div><div><input id="quantity'+ x +'" class="form-control-lg" type="text" placeholder="1"  maxlength="4" size="4"></div><div class="col"><input id="items'+ x +'" placeholder="Egg" class="form-control form-control-lg" type="text" name="mytext[]"></div></div><a href="#" class="delete ml-2 float-right">Delete</a></div>'); //add input box
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
    $(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
});

</script>

So the current layout looks like so.

But when I append the item, it looks like so.

Any help would be appreciated.

Answer 1

I was able to fix it by placing the html into a template variable like so and appending it

    var crap = `            
         <div class="mt-2 row">
                <div class="mr-2">
                    <select class="custom-select custom-select-lg" id="measurements'+ x'">
                        <option selected value="item">Item</option>
                        <option value="tablespoon">Tablespoon</option>
                        <option value="cup">Cup</option>
                    </select>
                </div>
                <div>
                    <input id="quantity'+ x +'" class="form-control-lg" type="text" placeholder="1"  maxlength="4" size="4">
                </div>

                <div class="col">
                    <input id="items'+'" placeholder="Egg" class="form-control form-control-lg" type="text" name="mytext[]">

           </div>;

Note the ` instead of '