クリックした回数をテーブルに表示したい

以下のようなことをやりたいのですが、javascriptがうまく機能せず困っています。
アドバイスいただけると助かります。

1 （クリックした回数を表示）Mark （クリックした回数を表示）Otto （クリックした回数を表示）mdo
2 （クリックした回数を表示）Jacob （クリックした回数を表示）Thornton （クリックした回数を表示）fat
3 （クリックした回数を表示）Larry （クリックした回数を表示）the Bird （クリックした回数を表示）twitter

試しているコード（途中）　↓

<!doctype html>
<html lang="ja">
  <head>
    <title>Click</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
      $('td').click(function() {
          // クリックした順番を変数に格納
          var i = i++;
          console.log(i)
      });
  </script>
  <body>
	<table class="table table-dark">
	  <thead>
	    <tr>
	      <th scope="col">#</th>
	      <th scope="col">First</th>
	      <th scope="col">Middle</th>
	      <th scope="col">Last</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr>
	      <th scope="row">1</th>
	      <td>Mark</td>
	      <td>Otto</td>
	      <td>@mdo</td>
	    </tr>
	    <tr>
	      <th scope="row">2</th>
	      <td>Jacob</td>
	      <td>Thornton</td>
	      <td>@fat</td>
	    </tr>
	    <tr>
	      <th scope="row">3</th>
	      <td>Larry</td>
	      <td>the Bird</td>
	      <td>@twitter</td>
	    </tr>
	  </tbody>
	</table>
  </body>
  
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

js
1      $('td').click(function() {
2          var i = $( this ).data( 'cnt' ) || 0;
3          i++;
4          console.log( $( this ).text(), ':', i )
5          $( this ).data( 'cnt', i );
6      });
7```**動くサンプル：**[https://jsfiddle.net/19dgx4p3/](https://jsfiddle.net/19dgx4p3/)