JSFiddle - React, Tailwind, and code Playground

by kodewrecker

HTML

<div id="content">
    <div class="iteration">
        <h3>Iteration 1 <span class="controlButtons"><input type="button" value="+" class="plus" /><input type="button" value="-" class="moins" /></span></h3>
      
    </div>
</div>
<input type="button" value="add iteration" id="addIteration" /><input type="button" value="remove iteration" id="removeIteration" />

CSS

.iteration, .iteration input[type="text"]{
    width: 500px;
    display: block;
}
.iteration{
 margin-bottom: 10px;   
}
.iteration > h3{
    background-color: #333333;
    color: white;
    height: 30px;
    line-height: 30px;
}
.iteration > h3 .controlButtons{
     float: right; 

}

JavaScript

$(function(){
    var nbIteration = 1;
    $("#addIteration").click(function(){
        nbIteration++;
        $("#content").append('<div class="iteration"><h3>Iteration '+ nbIteration +'<span class="controlButtons"><input type="button" value="+" class="plus" /><input type="button" value="-" class="moins" /></span></h3><input type="text" value="Create a task for this iteration" /></div>');
    });
    $("#removeIteration").click(function(){
        if($(".iteration").length > 0){
            nbIteration--;
            $(".iteration").last().remove();
        }
    });
    $(".plus").on("click", function(){
        var parent = $(this).parent().parent().parent(".iteration");
        parent.append('<input type="text" value="Create a task for this iteration" />');
        var nbinput = parent.find("input[type='text']").length;
        if(nbinput == 5)
            parent.find(".plus").attr("disabled","disabled");
        if(nbinput > 0)
            parent.find(".moins").attr("disabled","");
    });
    $(".moins").on("click", function(){       
        var parent = $(this).parent().parent().parent(".iteration");
        parent.children("input").last().remove();
        var nbinput = parent.find("input[type='text']").length;
        if(nbinput < 5)
            parent.find(".plus").attr("disabled","");
        if(nbinput == 0)
            parent.find(".moins").attr("disabled","disabled");
    });
});