Question

I have 2 buttons which are both displayed twice like below:

Button 1 (Performs the onclick='SelectAll(this)')
Button 1 (Performs the onclick='RemoveAll(this)')

Button 2 (Performs the onclick='SelectAll(this)')
Button 2 (Performs the onclick='RemoveAll(this)')

Both Button 1 and Button 2 should appear once like below:

Button 1 (Performs the onclick='SelectAll(this)')
Button 2 (Performs the onclick='RemoveAll(this)')

How can I achieve this above:

The code which displays these buttons are below:

function insertButton(form) {   


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

$('.buttonOne:first, .buttonTwo:first').each(function() {
        var $this = $(this);
        var $BtnsClass = '';

        $row = $("<tr/>").appendTo($answer);
        $cell = $("<td/>").appendTo($row);


        $BtnsClass = $("<input class='buttonOne btnsAll' type='button' style='display: block;' value='Button 1' onClick='selectAll(this);' />
        <br/>
        <input class='buttonTwo btnsRemove' type='button' style='display: block;' value='Button 2' onClick='removeAll(this);' />")
        .attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));

        $BtnsClass.appendTo($cell);

    });  

        $tr.append($answer);

        }   

Below is the html where the buttons in the jquery should match to

<p><input class="buttonOne btnsAll" name="allBtnsName" type="button" value="Button 1" onClick="selectAll(this);" />
<br/><input class="buttonTwo btnsRemove" name="allRemoveBtnsName" type="button" value="Button 2" onClick="removeAll(this);" /></p>

The html buttons only display each button once which is fine, so why is the jquery displaying the buttons twice and not once?

Answer 1

I think you are looking for some functionality like below,

function insertButton(form) {   

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

    var $btnOne = $('.buttonOne:first');
    var $btnTwo = $('.buttonTwo:first');

    var $BtnsClass = '';

    $row = $("<tr/>").appendTo($answer);
    $cell = $("<td/>").appendTo($row);

    $BtnsClass = $("<input class='buttonOne btnsAll' type='button' style='display: block;' value='Button 1' onClick='selectAll(this);' />
        <br/>
        <input class='buttonTwo btnsRemove' type='button' style='display: block;' value='Button 2' onClick='removeAll(this);' />");

    $BtnsClass.attr('name', $btnOne.attr('name')).attr('value', $btnOne.val()).attr('class', $btnOne.attr('class')).appendTo($cell);

    $BtnsClass.attr('name', $btnTwo.attr('name')).attr('value', $btnTwo.val()).attr('class', $btnTwo.attr('class')).appendTo($cell);

    $tr.append($answer);
}