title: Button click once to update
body: <p>I am having an application where a button click on a specific row would update one of the column. It does it all just fine, except that I have to click the update button twice. I believe this could be because of the way I am declaring variables and using them. Below is the code.</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;td&gt;&lt;button class="UpdateBtn" onclick="EmpUpdate()"&gt;Update&lt;/button&gt;&lt;/td&gt;
  </code></pre>
  
  <p>Js</p>
  
  <pre><code>  function EmpUpdate() {
  $(".UpdateBtn").on('click', function () {
      var currentRow = $(this).closest("tr");
      var col1 = currentRow.find("td:eq(0)").html();
      var col2 = currentRow.find("td:eq(1)").html();
      var data = [col1, col2];
  
      $.ajax({
          async: true,
          url: "Home/EmpUpdate?empName=" + col1 + " &amp;empId=" + col2,  
          cache: false,
          dataType: "json",
          success: function (data) { receiveResponse(data); }
      });
      console.log(data);
  });
  }
  </code></pre>