I am trying to create two button sets that, when clicked, are supposed to angle the text below them at 45 degrees. However, I am facing an issue where both set 1 and set 2 only control the text linked to button 1. I need each button set to control their respective text. Can anyone assist me in resolving this by providing accurate code? Below is what I currently have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {font-family:sans-serif; font-size:12px;}
/*#ctrls {float:left; margin-right:20px;}*/
a {margin-left:40px;}
div#ctrls {position:absolute; top:40px; z-index:1;}
div#ftP {position:absolute; top:80px; z-index:0;}
div#ctrls2 {position:absolute; top:120px; z-index:1;}
div#ftP2 {position:absolute; top:160px; z-index:0;}
</style>
<script type="text/javascript">
function transform()
{
var rotation = document.getElementById('rotation').value;
document.getElementById('ft').style.webkitTransform='rotate('+rotation+'deg)';
}
function reset()
{
document.getElementById('ft').style.webkitTransform='rotate(45deg)';
document.getElementById('rotation').value = 0;
}
</script>
</head>
<body>
<div id="ctrls">
<p type="text" id="rotation" size="4" />
<button onclick="transform()">-</button><button onclick="reset()">+</button>
</div>
<div id="ftP"><p id="ft">hello</p></div>
<div id="ctrls2">
<p type="text" id="rotation" size="4" />
<button onclick="transform()">-</button><button onclick="reset()">+</button>
</div>
<div id="ftP2"><p id="ft">taxes</p></div>
</body>
</html>