JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal-body">
   <input type="text" class="input-task" placeholder="Enter">
   </div>
   <button type="submit" class="add-task">save</button>
   <div class="todos-container">
   </div>

CSS

.valuetask2{
   text-decoration: line-through;
}

JavaScript

$(document).ready(function(){
    addListenerToAddTask(); 
});
    function addListenerToAddTask(){
        $(".add-task").click(function(){
            var valueTask = $(".input-task").val();
            if(!valueTask){
                alert("Pleas input text")
                return false
            }
            var ToDoConteiner = "<div class='todo-container'><strong class='valuetask'>"+ valueTask +"</strong><input type='checkbox' class='chetyre'/><button class='del-task'>delete</button></div>";
            $(".todos-container").append(ToDoConteiner);
            $(".input-task").val("");
            addListenerToDelTask();
$(".chetyre").click(function () {
    if ($(this).is(":checked")) {
      $(".valuetask").addClass("valuetask2");
    } else {
        $(".valuetask").removeClass("valuetask2");
    }
}); 
});
        };
function addListenerToDelTask(){
    $(".del-task").click(function(){
        $(this).parents(".todo-container").remove();
    })
};