Question

I have two functions in my jquery which manage to buttons and then display the buttons. What I want is that I want the buttons to be display in a table row but I want the buttons not to display next to each other but to display above one another. Does anyone know how to do this in my jquery code?

Jquery code below:

function insertQuestion(form) {   

   var $answer = $("<table class='answer'></table>");


   $('.allBtns:first-child').each(function() {
            var $this = $(this);
            var $allBtnsClass = '';

    $allBtnsClass = $("<input class='allBtns btnsAll' type='button' style='display: inline-block;' value='Select All Answers' onClick='selectAll(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));
        }
            $answer.append($allBtnsClass);
        });

        $('.allRemoveBtns:first-child').each(function() {

            var $this = $(this);
            var $removeBtnsClass = '';

            $removeBtnsClass = $("<input class='allRemoveBtns btnsRemove' type='button' style='display: inline-block;' value='Remove All Answers' onClick='removeAll(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));
        }

            $answer.append($removeBtnsClass);
        });

    $tr.append($answer);

}

Answer 1

I guess you’d be alright if you change the display property that you set in the style attribute for the buttons from inline-block to block.

Use this:

style='display: block;'

instead of this:

style='display: inline-block;'

Note Aside from that, I believe you code looks broken. The format in the code example isn’t so readable, so I might be mistaking my self, but I cant work out your { } signs, they look messed up. It looks like you are doing stuff outside the function you pass to the .each() method. Does the code work as you expect?