Edit on
<div class="design-my-economy">
	<h1 class="intro">Design my economy<a href="http://joacimnilsson.se/coding?rel=codepen" target="_blank">by joacimnilsson.se</a></h1>
	<div class="section each-months">
		<div class="header">
			Montlhy
		</div>
		<div class="staple">
			<h2>Earnings</h2>
			<ul class="income">
				<li class="template">
					<input type="text" value="Name"><br>
					<input type="number" min="0" step="10" value="0">
					<span class="remove">X</span>
				</li>
			<li class="">
					<input type="text" value="My work - Salary"><br>
					<input type="number" min="0" step="10" value="99000">
					<span class="remove">X</span>
				</li><li class="">
					<input type="text" value="Website Ads"><br>
					<input type="number" min="0" step="10" value="1250">
					<span class="remove">X</span>
				</li><li class="">
					<input type="text" value="Youtube Videos"><br>
					<input type="number" min="0" step="10" value="900">
					<span class="remove">X</span>
				</li></ul>
			<div class="add">+</div>
		</div>
		<div class="staple">
			<h2>Expenses</h2>
			<ul class="expenses">
		  		<li class="template">
					<input type="text" value="Name"><br>
					<span class="negative">-</span><input type="number" min="0" step="10" value="0">
					<span class="remove">X</span>
				</li>
			<li class="">
					<input type="text" value="Rent"><br>
					<span class="negative">-</span><input type="number" min="0" step="10" value="1980">
					<span class="remove">X</span>
				</li><li class="">
					<input type="text" value="Loan"><br>
					<span class="negative">-</span><input type="number" min="0" step="10" value="3500">
					<span class="remove">X</span>
				</li><li class="">
					<input type="text" value="Bus"><br>
					<span class="negative">-</span><input type="number" min="0" step="10" value="1400">
					<span class="remove">X</span>
				</li><li class="">
					<input type="text" value="Phone"><br>
					<span class="negative">-</span><input type="number" min="0" step="10" value="269">
					<span class="remove">X</span>
				</li><li class="">
					<input type="text" value="Food"><br>
					<span class="negative">-</span><input type="number" min="0" step="10" value="2000">
					<span class="remove">X</span>
				</li><li class="">
					<input type="text" value="Activities"><br>
					<span class="negative">-</span><input type="number" min="0" step="10" value="1000">
					<span class="remove">X</span>
				</li><li class="">
					<input type="text" value="Stuff"><br>
					<span class="negative">-</span><input type="number" min="0" step="10" value="1500">
					<span class="remove">X</span>
				</li></ul>
			<div class="add">+</div>
		</div>
		<div class="staple">
			<h2>Variable Savings</h2>
			<ul class="variable-savings">
		  		<li class="template">
					<input type="text" value="Name"><br>
					<input type="number" min="0" step="10" value="0">
					<span class="remove">X</span>
				</li>
			<li class="">
					<input type="text" value="Buffer"><br>
					<input type="number" min="0" step="10" value="6000">
					<span class="remove">X</span>
				</li></ul>
			<div class="add">+</div>
		</div>
		<div class="staple">
			<h2>Locked Savings</h2>
			<ul class="locked-savings">
		  		<li class="template">
					<input type="text" value="Name"><br>
					<input type="number" min="0" step="10" value="0">
					<span class="remove">X</span>
				</li>
			<li class="">
					<input type="text" value="Retirement"><br>
					<input type="number" min="0" step="10" value="4000">
					<span class="remove">X</span>
				</li></ul>
			<div class="add">+</div>
		</div>
	</div>
	<div class="section each-years">
		<div class="header">
			Yearly
		</div>
		<div class="staple">
			<h2>Bonus Earnings</h2>
			<ul class="bonus-income">
		  		<li class="template">
					<input type="text" value="Name"><br>
					<input type="number" min="0" step="10" value="0">
					<span class="remove">X</span>
				</li>
			<li class="">
					<input type="text" value="Bonus from work"><br>
					<input type="number" min="0" step="10" value="1200">
					<span class="remove">X</span>
				</li><li class="">
					<input type="text" value="Vacation"><br>
					<input type="number" min="0" step="10" value="5000">
					<span class="remove">X</span>
				</li></ul>
			<div class="add">+</div>
		</div>
		<div class="staple">
			<ul class="predictable-expenses">
				<h2>Predictable Expenses</h2>
		  		<li class="template">
					<input type="text" value="Name"><br>
					<span class="negative">-</span><input type="number" min="0" step="10" value="0">
					<span class="remove">X</span>
				</li>
			<li class="">
					<input type="text" value="Fixing car"><br>
					<span class="negative">-</span><input type="number" min="0" step="10" value="2000">
					<span class="remove">X</span>
				</li><li class="">
					<input type="text" value="Fixing apartment"><br>
					<span class="negative">-</span><input type="number" min="0" step="10" value="3000">
					<span class="remove">X</span>
				</li></ul>
			<div class="add">+</div>
		</div>
	</div>
	<div class="section total">
		<div class="header">
			<div class="controls">
				<div class="minus">-</div>
				<div class="plus">+</div>
			</div>
			<span class="total-text">Total over 
				<span id="calc-months">12</span> months ( 
				<span id="calc-years">1</span> years )
			</span>
		</div>
		<div class="staple">
			<h2>Income Total</h2>
			<span class="calc-total calc-1">264200</span>
			<div class="chart income">
			  <div style="transform: translateY(0%);"></div>
			</div>
		</div>
		<div class="staple">
			<h2>Expenses Total</h2>
			<span class="calc-total calc-2">-144788</span>
			<div class="chart expenses">
			  <div style="transform: translateY(45.1976%);"></div>
			</div>
		</div>
		<div class="staple">
			<h2>Variable Savings Total</h2>
			<span class="calc-total calc-3">72000</span>
			<div class="chart variable-savings">
			  <div style="transform: translateY(72.7479%);"></div>
			</div>
		</div>
		<div class="staple">
			<h2>Locked Savings Total</h2>
			<span class="calc-total calc-4">48000</span>
			<div class="chart locked-savings">
			  <div style="transform: translateY(81.8319%);"></div>
			</div>
		</div>
	</div>
	<div class="addsup">
		<div class="true">
			Yeeeehaa! This adds up! You've got <span></span> more to spend!
		</div>
		<div class="false">
			This does not add up...  You lose <span></span> each month!
		</div>
	</div>
</div>
/* Overall */
body {
	background: #1d1e20;
	font-family: arial;
	box-sizing: border-box;
	padding: 20px;
}

.intro {
	font-size: 30px;
	padding: 50px 0 40px;
	color: #fff;
	text-align: center;
	
	a {
		font-size: 15px;
		text-decoration: none;
		display: block;
		margin-top: 10px;
		color:#00FFD4;
	}
}

h2 {
	font-size: 12px;
	margin-bottom: 5px;
	color: #f1f1f1;
}

.design-my-economy {
	max-width: 750px;
	min-width: 600px;
	margin: 0 auto;
}

.section {
	width: 100%;
	display: block;
	float: left;
	box-sizing: border-box;
	border-radius: 5px;
	margin: 0 0 10px;
	
	.header {
		background: #1d1e20;
		color: #ffffff;
		box-sizing: border-box;
		padding: 20px 20px 10px;
		text-align: center;
		background: transparent;
		
		.total-text {
			font-size: 14px;
			margin-bottom: 20px;
			display: block;
		}
		
		.controls {
			padding: 0 0 20px;
			
			> div {
				display: inline-block;
				background: rgba(0,0,0,.2);
				padding: 10px;
				box-sizing: border-box;
				border-radius: 5px;
				cursor: pointer;
				text-align: center;
				width: 40px;
				user-select: none;
				transition: .5s;
				
				&:hover {
					background: rgba(0,0,0,.5);
				}
			}
		}
	}
	
	.staple {
		float: left;
		width: 25%;
		display: block;
		box-sizing: border-box;
		padding: 10px 0 10px 10px;
		
		&:last-child {
			padding-right: 10px;
		}
		
		.calc-total {
			margin: 10px 0;
			color: #ffffff;
			width: 100%;
			display: block;
		}
		
		.template {
			display: none;
		}
		
		li {
			position: relative;
			margin-bottom: 5px;
			animation: intro .5s ease-in;
			
			.remove {
				background: #fd3e81;
				position: absolute;
				border-radius: 5px;
				height: 49px;
				font-size: 12px;
				text-align: center;
				line-height: 49px;
				color: #ffffff;
				opacity: 0.2;
				top: 0;
				right: 0;
				width: 18%;
				cursor: pointer;
				transition: .5s;
				
				&:hover {
					opacity: 1;
				}
			}
		}
		
		@keyframes intro {
			from {
				opacity: 0;
			}
		}
		
		input {
			background: rgba(0,0,0,.3);
			border: 0;
			padding: 5px;
			outline: none;
			box-sizing: border-box;
			margin-bottom: 3px;
			border-radius: 5px;
			color: #ffffff;
			width: 80%;
			transition: .3s;
			
			&:hover {
				background: rgba(0,0,0,.2);
			}
		}
		
		.negative {
			position: absolute;
			left: 5px;
			font-size: 12px;
			line-height: 23px;
			color: #ffffff;
			
			& + input {
				padding-left: 10px;
			}
		}
		
		.add {
			margin-top: 10px;
			border-radius: 5px;
			text-align: center;
			background: rgba(0,0,0,0.1);
			box-sizing: border-box;
			padding: 10px 0;
			cursor: pointer;
			color: #ffffff;
			font-size: 12px;
			transition: .5s;
			
			&:hover {
				background: rgba(0,0,0,.4);
			}
		}
	}	
}

/* Section Based */

.each-months {
	background: #333333;
}

.each-years {
	background: #333333;
}

.total {
	margin-bottom: 60px;
	background: #333333;
	
	.chart {
		position: relative;
		overflow: hidden;
		height: 400px;
		padding: 0;
		margin: 0;
		display: block;
		
		&.income {
			
			> div {
				background: #2AD33F;
			}
		}
		
		&.expenses {
			
			> div {
				background: #D3412A;
			}
		}
		
		&.variable-savings {
			
			> div {
				background: #00FFD4;
			}
		}
		
		&.locked-savings {
			
			> div {
				background: #5F4695;
			}
		}
		
		> div {
			width: 100%;
			height: 400px;
			display: block;
			position: absolute;
			transform: translateY(100%);
			box-sizing: border-box;
			transition: .8s;
		}
	}
}

.addsup {
	text-align: center;
	width: 100%;
	display: block;
	margin-bottom: 150px;
	font-size: 28px;
	box-sizing: border-box;
	padding: 30px;
	
	span {
		font-size: 36px;
	}
	
	.true {
		color: #2AD33F;
	}
	
	.false {
		color: #D3412A;
	}
}
View Compiled
$(document).ready(function(){
	$('.add').click(function(){
		$(this)
			.prev()
			.children('.template')
			.clone(true,true)
			.removeClass('template')
			.appendTo($(this).prev());
	});
	$('.remove').click(function(){
		$(this).parent().remove();
	});
	
	var monthsNums = parseInt($('#calc-months').text());
	
	function calcYears() {
		$('#calc-years').text(Math.round(monthsNums / 12 * 100) / 100);
	}
	
	$('.controls .plus').click(function(){
		monthsNums++;
		$('#calc-months').text(monthsNums);
		calcYears();
	});
	$('.controls .minus').click(function(){
		if(monthsNums > 1)
			monthsNums--;
		$('#calc-months').text(monthsNums);
		calcYears();
	});
	
	function calcTotal() {
		var totalIncome = 0,
			numbers = 0,
			totalIncome1 = 0,
			numbers1 = 0,
			totalIncome2 = 0,
			numbers2 = 0,
			totalIncome3 = 0,
			numbers3 = 0,
			totalIncome4 = 0,
			numbers4 = 0,
			totalIncome5 = 0,
			numbers5 = 0;
		
		$('.each-months .income li').each(function(){
			numbers = Number($(this).children('input[type="number"]').val());
			totalIncome = totalIncome + numbers;
		});
		
		$('.each-months .expenses li').each(function(){
			numbers1 = Number($(this).children('input[type="number"]').val());
			totalIncome1 = totalIncome1 + numbers1;
		});
		
		$('.each-months .variable-savings li').each(function(){
			numbers2 = Number($(this).children('input[type="number"]').val());
			totalIncome2 = totalIncome2 + numbers2;
		});
		
		$('.each-months .locked-savings li').each(function(){
			numbers3 = Number($(this).children('input[type="number"]').val());
			totalIncome3 = totalIncome3 + numbers3;
		});
		
		$('.each-years .bonus-income li').each(function(){
			numbers4 = Number($(this).children('input[type="number"]').val());
			totalIncome4 = totalIncome4 + numbers4;
		});
		
		$('.each-years .predictable-expenses li').each(function(){
			numbers5 = Number($(this).children('input[type="number"]').val());
			totalIncome5 = totalIncome5 + numbers5;
		});
		
		var incomeTotal = Math.round(
				(totalIncome * monthsNums) + 
				((totalIncome4 / 12) * monthsNums)
			),
			expensesTotal = Math.round(
				(totalIncome1 * monthsNums) + 
				((totalIncome5  / 12) * monthsNums)
			),
			variableSavingsTotal = totalIncome2 * monthsNums,
			lockedSavingsTotal = totalIncome3 * monthsNums;
		
		var biggest = 0,
			incomeTotal = +incomeTotal || 0,
			expensesTotal = +expensesTotal || 0,
			variableSavingsTotal = +variableSavingsTotal || 0,
			lockedSavingsTotal = +lockedSavingsTotalĀ || 0;
		
		if(incomeTotal > expensesTotal && incomeTotal > variableSavingsTotal && incomeTotal > lockedSavingsTotal) {
		   biggest = incomeTotal;
		} else if(expensesTotal > incomeTotal && expensesTotal > variableSavingsTotal && expensesTotal > lockedSavingsTotal) {
			biggest = expensesTotal;
		} else if(variableSavingsTotal > expensesTotal && variableSavingsTotal > incomeTotal && variableSavingsTotal > lockedSavingsTotal) {
			biggest = variableSavingsTotal;
		} else {
			biggest = lockedSavingsTotal;
		}
		
		var incomeChart = (100 - (incomeTotal / biggest) * 100),
			incomeChart = incomeChart || 0,
			expensesChart = (100 - (expensesTotal / biggest) * 100),
			expensesChart = expensesChart || 0,
			variableSavingsChart = (100 - (variableSavingsTotal / biggest) * 100),
			variableSavingsChart = variableSavingsChart || 0,
			lockedSavingsChart = (100 - (lockedSavingsTotal / biggest) * 100),
			lockedSavingsChart = lockedSavingsChart || 0;

		$('.total .income > div').css({
			"transform":"translateY(" + incomeChart + "%)",
			"-webkit-transform":"translateY(" + incomeChart + "%)",
			"-ms-transform":"translateY(" + incomeChart + "%)",
		});
		$('.total .expenses > div').css({
			"transform":"translateY(" + expensesChart + "%)",
			"-webkit-transform":"translateY(" + expensesChart + "%)",
			"-ms-transform":"translateY(" + expensesChart + "%)",
		});
		$('.total .variable-savings > div').css({
			"transform":"translateY(" + variableSavingsChart + "%)",
			"-webkit-transform":"translateY(" + variableSavingsChart + "%)",
			"-ms-transform":"translateY(" + variableSavingsChart + "%)",
		});
		$('.total .locked-savings > div').css({
			"transform":"translateY(" + lockedSavingsChart + "%)",
			"-webkit-transform":"translateY(" + lockedSavingsChart + "%)",
			"-ms-transform":"translateY(" + lockedSavingsChart + "%)",
		});
		
		var addsUp = ((incomeTotal) - (expensesTotal + variableSavingsTotal + lockedSavingsTotal));
		
		if(addsUp >= 0) {
			$('.addsup .false').hide();
			$('.addsup .true').show();
			$('.addsup .true span').text(addsUp);
		} else {
			$('.addsup .true').hide();
			$('.addsup .false').show();
			$('.addsup .false span').text(addsUp);
		}
		
		$('.total .calc-1').text(incomeTotal);
		$('.total .calc-2').text((expensesTotal) - expensesTotal * 2);
		$('.total .calc-3').text(variableSavingsTotal);
		$('.total .calc-4').text(lockedSavingsTotal);
	}
	
	calcTotal();
	
	$(document).on('click keyup tap', function(){
		calcTotal();
	});
});
Rerun