document.addEventListener("DOMContentLoaded", function(){


    let modifier_button = document.getElementsByClassName("ingr-modifier");

    console.log(modifier_button);

    for (const element of modifier_button) {
        element.addEventListener('click', function () {
            let modif = element.parentElement.previousSibling.previousSibling;

            let data = element.getAttribute("data-id");
            
            let form = document.createElement("form");

            form.setAttribute("method", "POST");
            form.setAttribute("action", "/ingredient/edit/" + data);
            form.setAttribute("class","liste-ingr-elem-text")

            let input = document.createElement("input");

            input.setAttribute("type", "text");
            input.setAttribute("class", "form-control");
            input.setAttribute("name","modif_ingr");
            input.setAttribute("placeholder", "modificiation");

            let hidden = document.createElement("input");

            hidden.setAttribute("type","hidden");
            hidden.setAttribute("name","id");
            hidden.setAttribute("value", data);

            let button = document.createElement("button");

            button.setAttribute("type", "submit");
            button.setAttribute("class", "btn btn-primary");
            button.innerText = "Submit Modification";

            form.append(input)
            form.append(hidden)
            form.append(button)

            modif.replaceWith(form);

        });
    };

});