Search code examples
javascriptjqueryhtmlcssclone

Copy div, change and output to the view

I'm a little overtaxed right now. I want to copy the last div with the class .recipe-options-line and paste it behind the last div with the class .recipe-options-line. That works so far.

I have to make some changes to the element before inserting the div. How can I do that?

  1. i want to delete any entries in the textarea that are present in the copied element.
  2. i want to replace in the copied element the number in the textarea (name="recipeOptions[0][number]") by the content of the variable RecipeOptionNumber.
  3. i want to replace in the copied element the last number of the data-limit-target="unique-10-1" and of the span id="unique-10-1" in the last div with the content of the variable RecipeOptionNumber, too.

Is that possible? Or do I have to look for another solution? Can someone help me?

HTML:

        <div class="col-md-12" id="recipe-options-div">
            <div class="recipe-options-line">
                <div class="col-md-3">
                    <div class="fancy-form">
                        <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
                        <textarea class="hide" name="recipeOptions[0][number]" rows="1"></textarea>
                        <i class="fa fa-dot-circle-o"><!-- icon --></i>
                        <span class="maximum-limit"></span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="fancy-form">
                        <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
                        <textarea class="hide" name="recipeOptions[0][unit]" rows="1"></textarea>
                        <i class="fa fa-dot-circle-o"><!-- icon --></i>
                        <span class="maximum-limit"></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="fancy-form">
                        <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
                        <textarea class="hide" name="recipeOptions[0][name]" rows="1"></textarea>
                        <textarea  data-limit-target="unique-10-1" class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
                        <i class="fa fa-comment"><!-- icon --></i>
                        <span id="unique-10-1" class="maximum-limit"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-center mb-15">
            <a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption"><i class="glyphicon glyphicon-plus"></i>option</a>
        </div>

JS:

var RecipeOptionNumber = 2;
    $(document).on("click", "#addRecipeOption", function () {
        $(".recipe-options-line:last").clone().insertAfter("div.recipe-options-line:last");
        RecipeOptionNumber ++;
    });
Solution

  • Is that possible? Or do I have to look for another solution? Can someone help me?

    Yes, of course it's possible! A good solution here would be to create a blank template for recipe options and a re-usable function to add them programmatically. See example below with comments:

    $(function() {
    var recipeOptionsDiv   = $("#recipe-options-div");
    var RecipeOptionNumber = 0;

    // Re-usable function to add recipe options
    function addRecipeOption() {
        // A blank recipe <div>
        var newRecipe = $("#recipe-template-wrapper .recipe-options-line").clone();

        // Iterate through each [data-recipe] element and set its [name] attribute accordingly
        newRecipe.find("[data-recipe]").each(function() {
            var recipeOption = $(this).attr("data-recipe");

            $(this).attr("name", "recipeOptions[" + RecipeOptionNumber + "][" + recipeOption + "]");
        });

        // Set [data-limit-target] to RecipeOptionNumber + 1
        newRecipe.find("[data-limit-target]").attr("data-limit-target", "unique-10-" + (RecipeOptionNumber + 1));

        // Insert the new HTML
        recipeOptionsDiv.append(newRecipe);

        // Increment recipe counter
        RecipeOptionNumber++;
    }

    // Add click event listener for Add Option button
    $("#addRecipeOption").click(addRecipeOption);

    // Add the first recipe option on page load
    addRecipeOption();
});
    #addRecipeOption {
    background-color: tomato;
    cursor: pointer;
    display: table;
    margin-bottom: 5px;
    margin-top: 10px;
    min-width: 100px;
    padding: 10px;
    text-align: center;
}
#recipe-template-wrapper {
    display: none;
}
.recipe-options-line {
    border-bottom: 1px solid;
    margin-bottom: 15px;
    padding-bottom: 10px;
}
    <!-- Add option button -->
<div class="text-center mb-15">
    <a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption">
        <i class="glyphicon glyphicon-plus"></i>option
    </a>
</div>

<!-- Recipe option divs will be appended here -->
<div class="col-md-12" id="recipe-options-div"></div>

<!--
    Hidden recipe option template HTML
    Elements' custom data-* attributes will be used to set their name attributes
-->
<div id="recipe-template-wrapper">
    <div class="recipe-options-line">
        <div class="col-md-3">
            <div class="fancy-form">
                <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
                <textarea class="hide" data-recipe="number" rows="1"></textarea>
                <i class="fa fa-dot-circle-o">
                    <!-- icon -->
                </i>
                <span class="maximum-limit"></span>
            </div>
        </div>
        <div class="col-md-3">
            <div class="fancy-form">
                <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
                <textarea class="hide" data-recipe="unit" rows="1"></textarea>
                <i class="fa fa-dot-circle-o">
                    <!-- icon -->
                </i>
                <span class="maximum-limit"></span>
            </div>
        </div>
        <div class="col-md-6">
            <div class="fancy-form">
                <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
                <textarea class="hide" data-recipe="name" rows="1"></textarea>
                <textarea data-limit-target class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
                <i class="fa fa-comment">
                    <!-- icon -->
                </i>
                <span id="unique-10-1" class="maximum-limit"></span>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>