How to add and remove HTML code block with the help of JavaScript?

Question

I am new to JavaScript, and I am learning to code by developing one application, where I need to call HTML code block with the help of JavaScript on the request of User. To explain more if user click on Task the HTML code block that represent the task will appear and user can call it multiple times and also user can close it too. I have written some code and it is working perfectly fine. My question is for future development if I want to do Database connectivity how would I do that? In my written code I have passed the HTML code into JavaScript, but I do not want to do that. I want to write HTML code in somefile.html and every time when User clicks the task somefile.js will repeat the same HTML code again and again. Also delete it too on User request.

somefile.js

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add-task");

    var task = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (task < max_fields) {
            task++;
            $(wrapper).append('<div id="style" id="taskjs[]"><a id="close" class="delete-task"><i class="fa fa-times-circle-o fa-lg" aria-hidden="true"></i></a><br><div id="taskbugsdescription"><div id="innertaskbugsdescription"><div id="taskstyle"><i class="fa fa-tasks fa-lg task" aria-hidden="true"></i><input placeholder="Task Name*" type="text" id="lname" name="lname" required><br><textarea placeholder="Description*" id="w3review" name="w3review" rows="3" cols="50" required></textarea></div><div id="deaddate"><h3>Deadline date</h3><input type="date" id="birthday" name="birthday" required></div></div><div id="mention"><i class="fa fa-user fa-lg assignto" aria-hidden="true"></i><input placeholder="@Assign to*" type="text" id="lname" name="lname" required><br><br><i class="fa fa-envelope fa-lg message" aria-hidden="true"></i><textarea placeholder="Message" id="w3review" name="w3review" rows="2" cols="20"></textarea></div></div></div>');
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete-task", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        task--;
    })
});

somefile.html

<a class="add-task"><i class="fa fa-tasks task fa-lg" aria-hidden="true"></i> Task</a>

<div class="container1">
    <!--When use click on TASK The HTML code written in JavaScript file will be displayed here-->
</div>

My Question is How do I write code where in future if I want to do Database connectivity I can easily implement it? Or How do I do database connectivity with the code I have (Because my HTML code is in JavaScript file.)

Answer 1

You will need to choose a server-side stack. This is true whether you choose a flat-file "database" (consisting of HTML files) or a database server. You can't write files from the browser.

Since you are becoming familiar with Javascript you might want to choose node.js, which is server-side Javascript.