my code should on button click (+) increase the font size of the first "How r u" and when pressing (-)decrease the font size of the second how r u

<html>
<head>
<title>Increase and Decrease font size using buttons</title>
<meta charset="utf-8">

<script type="text/javascript">

document.writeln("<p id='line1'>How r u</p>");
<input id="increase" type="button"onclick="increaseFontSize()" value="+" />
document.writeln("<p id='line2'>How r u</p>");
<input id="decrease" type="button"onclick="decreaseFontSize()" value="-" />
var min=8;
var max=18;
function increaseFontSize() {
var p = document.getElementById('line1');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+"px"
}
}
function decreaseFontSize() {
var p = document.getElementById('line2');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+"px"
}
}


</script>
</head>


<body>
</body>
</html>