Question

I have buttons going from A-Z. I have the jQuery code below where if there are 7 buttons, then display a new row. So it looks like this below:

A B C D E F G
H I J K L M N
O P Q R S T U
V W X Y Z

But something I just can’t get round is that I just want to add a simple word <p>Answer:</p> into the top of the buttons so it displays it like this:

Answer:

A B C D E F G
H I J K L M N
O P Q R S T U
V W X Y Z

I just can’t get my head around it, how can I achieve this with my current jQuery code:

var $this, i=0, $row, $cell;
$('#optionAndAnswer .answers').each(function() {
    $this = $(this);
    if(i%7 == 0) {
        $row = $("<tr/>").appendTo($answer);
        $cell = $("<td/>").appendTo($row);
    }

    var $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));

    $newBtn.appendTo($cell);

    i++;
});

Answer 1

Change your second line …

$('#optionAndAnswer .answers').each(function() {

… to …

$('#optionAndAnswer .answers').prepend('<p>Answer:</p>').each(function() {