Adding id to a specific button using jQuery

Question

I'm new to jQuery and JS. So I have this task to create tabel row using a dialog form. On every row the last cell must contain a button. My question is how can I add id for this specific button. I've tried selecting the button and adding .attr('id','delete'), but this changes the id of the button that opens the dialog.

So how can I add id only to the newly created button?

< script type = "text/javascript" >

  function validateForm(form) {
    var errors = [];
    $(form.elements).each(function() {
      var $this = $(this);
      if (!$this.val()) {
        var msg = $this.prev().html() + ' е задължително поле';
        errors.push(msg);
      }
    });

    return errors;
  }

function saveForm(form) {

  var nextNumber = $('table tr').length;
  var rowTpl = '<tr>' +
    '<td>' + nextNumber + '</td>' +
    '<td>' + $('#brand', form).val() + '</td>' +
    '<td>' + $('#model', form).val() + '</td>' +
    '<td>' + $('#year', form).val() + '</td>' +
    '<td>' + $('#kms', form).val() + '</td>' +
    '<td>' + '<button>' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
    '</tr>';

  $('table').append(rowTpl);
}

$(function() {
  $('#add-btn').button({
    icons: {
      primary: 'ui-icon-circle-plus'
    }
  }).on('click', function() {
    $('#form-container').dialog('open')
  });

  $('#form-container').dialog({
    autoOpen: false,
    modal: true,
    buttons: [{
      text: 'Save',
      click: function() {
        var form = $(this).find('form').get(0);
        var errors = validateForm(form);

        if (errors.length) {
          return alert(errors.join("\n"));
        }

        saveForm(form);
        form.reset();
        $(this).dialog('close');
      }
    }, {
      text: 'Close',
      click: function() {
        $(this).find('form').get(0).reset();
        $(this).dialog('close');
      }
    }]
  });
})

$('#delete').button({});

$("#delete").click(function() {
  $(this).parents('tr').first().remove();
});

< /script>

<style type="text/css"> table {
  border-collapse: collapse;
}
th {
  padding: 0.2em;
}
td {
  margin: 0.2em;
  padding: 0.2em;
  text-align: center;
  border: 1px solid grey;
}
.ui-widget-header,
.ui-widget-content {
  padding: 0.8em;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
</style>

<div id="container" class="ui-widget">
  <div class="ui-widget-header ui-helper-clearfix">
    <h3 class="float-left">ALL CARS</h3>
    <button class="float-right" id="add-btn">
      <span>Add New Address</span>
    </button>
  </div>
  <div class="ui-widget-content">
    <table width="100%">
      <tr>
        <th>#</th>
        <th>Марка</th>
        <th>Модел</th>
        <th>Година</th>
        <th>Километри</th>
        <th>Премахни</th>
      </tr>
      <tr>
        <td>1</td>
        <td>BMW</td>
        <td>i8</td>
        <td>2015</td>
        <td>10 000</td>
        <td>
          <button class="float-center" id="delete">
            <span>Delete</span>
          </button>
        </td>
      </tr>
    </table>

  </div>

  <div id="form-container" title="Add new car">
    <form action="">
      <div>
        <label for="brand">Марка</label>
        <input type="text" id="brand" />
      </div>
      <div>
        <label for="model">Модел</label>
        <input type="text" id="model" />
      </div>
      <div>
        <label for="year">Година</label>
        <input type="number" id="year" />
      </div>
      <div>
        <label for="kms">Километри</label>
        <input type="number" id="kms" />
      </div>
    </form>
  </div>
</div>

Thank you!

Answer 1

id must be unique in the entire document, so setting id to "delete" for all of these buttons is incorrect. You can set a class. When you are creating it, you could just create it as <button class='delete'>, and then use $(".delete") to find all buttons.

You can also set the action directly in the code:

var rowTpl = '<tr>' +
  '<td>' + nextNumber + '</td>' +
  '<td>' + $('#brand', form).val() + '</td>' +
  '<td>' + $('#model', form).val() + '</td>' +
  '<td>' + $('#year', form).val() + '</td>' +
  '<td>' + $('#kms', form).val() + '</td>' +
  '<td>' + '<button onclick="$(this).closest(\'tr\').remove();">' + '<span>' + 'Delete' + '</span>' + '</button>' +
  '</td>' +
  '</tr>';

Answer 2

ids are singular so you should not be setting the same id on multiple elements. Second the onclick you are adding with that id is not going to be attached to the button that you create after that code runs. Just like if the phone rings and you are not there, you will not answer it.

Use event delegation to detect what one was clicked and you can use closest to get access to the row the button resides in.

//attach the click handler to the table and listen for a click on a button
$("table").on("click", "button", function () {  
    var button = $(this);  //The button that was clicked
    var row = button.closest("tr"); //The row the button is in.
    row.remove();  //delete the row
});

Answer 3

Add id to the button in your rowTpl variable like following.

var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button id="delete'+nextNumber+'">' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
'</tr>';

It will add button id as delete1, delete2, delete3,......