How to make a single button appear on only 1 jquery function - html

Question

I have a button called add to profile, all I need to know is how do I make it so its only on the last jQuery div, after the last next.
Like question 1, then next, question 2 back and next, question 3, back and add button.
So if you can really help me out here quick I'd really appreciate it.
Here's my code:
<script>
$(document).ready(function () {
var oldOption;
var counter = 1;
var maxThings = 4;
var minThings = 1;
$("#2").hide();
$("#3").hide();
$("#4").hide();
$('#back').hide();
$("#forward").click(function () {
$("#1").hide();
$("#2").hide();
$("#3").hide();
$("#4").hide();
if (!(counter >= maxThings)) {
counter++;
}
$("#" + counter).show();
$('#back').show();
if (counter === maxThings) {
$('#forward').hide();
}
});
$("#back").click(function () {
$("#1").hide();
$("#2").hide();
$("#3").hide();
$("#4").hide();
if (!(counter <= 1)) {
counter--;
}
$("#" + counter).show();
$('#forward').show();
if (counter === minThings) {
$('#back').hide();
}
});
});
</script>

Answer 1

...
if (counter === maxThings) {
$('#forward').hide();
$("#AddToProfile").show();
} else {
$("#AddToProfile").hide();
}
...
And I really don't like youre coding :) You'll have to change code every time you'll add new div.
I would do something like that:
- Every div would have class question
- Every div's START visibility attribute would be defined in html (every div except first would have in style something like visibility:hidden)
<script>
$(document).ready(function () {
var oldOption;
var counter = 1;
var maxThings = 4;
var minThings = 1;
$('#back').hide();
$("#forward").click(function () {
$("div.question").hide();
if (!(counter >= maxThings)) {
counter++;
}
$("#" + counter).show();
$('#back').show();
if (counter === maxThings) {
$('#forward').hide();
}
});
$("#back").click(function () {
$("div.question").hide();
if (!(counter <= 1)) {
counter--;
}
$("#" + counter).show();
$('#forward').show();
if (counter === minThings) {
$('#back').hide();
}
});
});
</script>