jQuery addClass example

Change class name on click in jQuery

HTML

<table>
    <tr id='addr0' class="addr0">
      <td>
        <div class="row">
          <div class="input-field col s12">
            <input type="text" id="product_code" name='product_code[]' class="autocomplete product_code"
              placeholder="Type apple">
          </div>
        </div>
      </td>
         </tr>
  </table>

<h4>Row ID: <span id='res' style="color:red; font-size: 1.2rem"></span></h4>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

JavaScript

M.AutoInit();

  $(function () {
    $("input.autocomplete").autocomplete({
      data: {
        apple: '',
        berry: '',
        lemon: '',
      },
      onAutocomplete: function (data) {
        // create a custom $this to point to the $("input.autocomplete")
        var $this = $(this)[0].$el;

        // Get the id of the table row
        var row_id = "#" + $this.parents('tr').attr('id') + ' '; // output: '#addr0 ' for the first row

        // Or get the tr element
        var $row = $this.parents('tr');

        console.log(row_id);
        console.log($row);
        console.log($(this));

				$('#res').text(row_id);


       } //End of OnAutocomplete
    });
  })