Question

I have some script that is delivering a series of rows from an SQL database.

I want to append.() a button to each row. My current code is:

tx.executeSql('SELECT * FROM myprogram', [], function (tx, results) {
                   var len = results.rows.length, i;
                    for (i = 0; i < len; i++) {

                        $('#myprog').append(results.rows.item(i).event)
                               $('.event').append('<button class="save_event">Remove</button>');

                        }
                });

But the buttons get doubled up. For example if I get 3 rows, the first row will have 3 buttons, the 2nd will have 2 and the last will have 1 button.

Can anyone help me out to have the buttons display only once per row?

Thanks!

Answer 1

I found the answer, quite simple:

var len = results.rows.length, i;
                    for (i = 0; i < len; i++) {

                        $('#myprog').append(results.rows.item(i).event).append('<button class="remove_event">Remove</button>');

                    }