var i = 1;

        function Add(evt){
            evt.style.display="none";
            i ++;
            var div = document.createElement('div');
            var from_hr = 'from_hr' + i;
            var from_min = 'from_min' + i;
            var to_hr = 'to_hr' + i;
            var to_min = 'to_min' + i;
            var id = evt.getAttribute('id');
            var len = id.length;
            var name = id.split('_')[0];
            var add = id.split('_')[0] + '_add' + i;
            var del = id.split('_')[0] + '_del' + i;
            var html = '';
            div.className = "col-12 row";
            div.style.marginTop = "10px";
            html += '<div class="col-xl-5 col-lg-5 col-md-4"  style="margin-top:10px;">';
				html += '<span>Duration</span>';
				if(id.split('_')[0] == 'tank1'){
				    html += ' <select name="tank1_duration' + i + '" class="duration">';
				}else if(id.split('_')[0] == 'tank2'){
				    html += ' <select name="tank2_duration' + i + '" class="duration">';
				}else{
				    html += '<select name="tank2_duration' + i + '" class="duration">';
				};
					html += '<option selected value="30min">30 min</option>';
					html += '<option  value="60min">60 min</option>';
					html += '<option  value="90min">90 min</option>';
					html += '<option  value="120min">120 min</option>';
					html += '<option  value="150min">150 min</option>';
				html += '</select>';
			html += '</div>';
			html += '<div class="from-to col-xl-7 col-lg-7 col-md-8"  style="margin-top:10px;">';
			html += '<div>';
          	html +=	'<div class="from row">';
                html +=	'<div class="col-xs-3">';
                    html +=	'<span> From</span>';
                html +=	'</div>';
                html +=	'<div  class="col-xs-6">';
                    html +=	'<select name="' + name + '_from_hr' + i + '">';
                for(var hr = 0; hr < 24; hr++){
                    if(hr < 10){
                        html +=	'<option value="0' + hr + '">0' + hr + '</option>';
                    }else{
                        html +=	'<option value="' + hr + '">' + hr + '</option>';
                    };
                };
                    html += '</select>';
                    html +=	' :<select name="' + name + '_from_min' + i + '">';
                for(var min = 0; min < 60; min++){
                    if(min < 10){
                        html +=	'<option value="0' + min + '">0' + min + '</option>';
                    }else{
                        html +=	'<option value="' + min + '">' + min + '</option>';
                    };
                };
                    html +=	'</select>';
                html +=	'</div>';
                html +=	'<div  class="col-xs-3">';
                    html +=	'<input  id=' + del + ' class="delete" type="button" value="Delete" onclick="Delete(' + del + ');">';
                html +=	'</div>';
            html +=	'</div>';
            html +=	'<div class="to row">';
                html +=	'<div  class="col-xs-3">';
                    html +=	'<span style="margin-left: 23px;">To</span>';
                html +=	'</div>';
                html +=	'<div  class="col-xs-6">';
                    html +=	'<select name="' + name + '_to_hr' + i + '">';
                for(var hr = 0; hr < 24; hr++){
                    if(hr < 10){
                        html +=	'<option value="0' + hr + '">0' + hr + '</option>';
                    }else{
                        html +=	'<option value="' + hr + '">' + hr + '</option>';
                    };
                };
                    html +=	'</select>';
                    html +=	' :<select name="' + name + '_to_min' + i + '">';
                for(var min = 0; min < 60; min++){
                    if(min < 10){
                        html +=	'<option value="0' + min + '">0' + min + '</option>';
                    }else{
                        html +=	'<option value="' + min + '">' + min + '</option>';
                    };
                };
                    html +=	'</select><br>';
                    html +=	'<input  id=' + add + ' class="add" type="button" value="Add" onclick="Add(' + add + ');">';
                html +=	'</div>';
                html +=	'<div  class="col-xs-3"></div>';
            html +=	'</div>';
            html += '</div>';
            html += '</div>';

            div.innerHTML = html;
            div.style.marginTop = '15px';
            div.style.zIndex = '100';
            evt.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(div);
        };

        function Delete(evt){
            var id = evt.getAttribute('id');
            var add = id.split('_')[0] + '_' + 'add';
            var clo_xs_3 = evt.parentNode;
            var from = clo_xs_3.parentNode;
            var div = from.parentNode.parentNode.parentNode;
            var next_div = div.nextElementSibling;
            var pre_div = div.previousElementSibling;

            if(next_div && pre_div == null){
                div.parentNode.removeChild(div);
                next_div.style.marginTop = '0px';
            }else if(next_div && pre_div){
                div.parentNode.removeChild(div);
            }else if(next_div == null && pre_div == null){
                 div.parentNode.parentNode.children[1].style.display = 'inline-block';
                 div.parentNode.style.visibility = 'hidden';
                 console.log("test");
                 var name = id.split('_')[0];
                 var from_hr = name + '_from_hr' + 1;
                 var from_min = name + '_from_min' + 1;
                 var to_hr = name + '_to_hr' + 1;
                 var to_min = name + '_to_min' + 1;
                 console.log(from_hr);
                 $('select[name=' + from_hr + ']').val('00');
                 $('select[name=' + from_min + ']').val('00');
                 $('select[name=' + to_hr + ']').val('00');
                 $('select[name=' + to_min + ']').val('00');
            }else{
                div.parentNode.removeChild(div);
                i --;
                add = add + i;
                add = document.getElementById(add);
                if(add == null){
                    add = pre_div.children[1].children[0].children[1].children[1].children[3];
                };
                add.style.display = 'block';
            };
        };

        $(function(){
                var tank1 = $(".set-schedule")[0];
                var tank1_div = $("#tank1_div");
                var tank2 = $(".set-schedule")[1];
                var tank2_div = $("#tank2_div");

            tank1.onclick = function(){
                tank1.style.display = 'none';
                tank1_div.css('visibility','visible');
            };

            tank2.onclick =  function(){
                tank2.style.display = 'none';
                tank2_div.css('visibility','visible');
            };


            $(".form-control")[0].onclick = function(){
                window.location.href = '/setting_root';
            };


        });