常連

Laravelを勉強しているものです。ユーザーテーブルから取得した結果をjavascriptを使って動的なテーブルを作成して横3列ずつユーザーの画像を表示させようとしています。ユーザーの画像をクリックするとPOSTでコントローラーにユーザーIDを渡すのですがここの処理がうまくいきません。

```php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
        $(document).ready(function() {
            $('html,body').animate({ scrollTop: 0 }, '1');
　　　　　　　　
　　　　　　　//ユーザー情報テーブルを検索してレスポンス結果をjsonで取得する
            $.ajax({
                url: 'showuser/init',
                type:'POST',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                dataType: 'json',
                data: {
                  "process_id" : "process01",
                },
                success: function(data) {
                    var yoso1 = Object.keys(data)[0];
                    var dataLength = Object.keys(data[yoso1]).length

                    var tbody = document.getElementById('tbodyID');

                    for (var i = 0; i < dataLength; i++) {

                        if((i + 1) % 3 == 0){

                          var tr = document.createElement('tr');
                            //左に表示するユーザー
                            var td1 = document.createElement('td');
                            var img1 = document.createElement("img");
                            img1.setAttribute("src", data[yoso1][i - 2]['pic_file']);
                            var aTag1 = document.createElement('a');
                            aTag1.onclick= function() {
                              $.ajax({
                                  url: '/showuser',
                                  type:'POST',
                                  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                                  dataType: 'html',
                                  data: {
                                    "user_id" : data[yoso1][i - 2]['user_id'],
                                  },
                                  success: function(html) {
                                      document.open();
                                      document.write(html);
                                      document.close();
                                  },
                                  error: function () {
                                      alert("読み込み失敗");
                                  }
                              });
                            };

                            aTag1.appendChild(img1);
                            td1.appendChild(aTag1);

                            //真ん中に表示するユーザー
                            var td2 = document.createElement('td');
                            var img2 = document.createElement("img");
                            img2.setAttribute("src", data[yoso1][i - 1]['pic_file']);
                            var aTag2 = document.createElement('a');
                            aTag2.onclick= function() {
                              $.ajax({
                                  url: '/showuser',
                                  type:'POST',
                                  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                                  dataType: 'html',
                                  data: {
                                    "user_id" : data[yoso1][i - 1]['user_id'],
                                  },
                                  success: function(html) {
                                    document.open();
                                    document.write(html);
                                    document.close();
                                  },
                                  error: function () {
                                      alert("読み込み失敗");
                                  }
                              });
                            };
                            aTag2.appendChild(img2);
                            td2.appendChild(aTag2);

                            //右に表示するユーザー
                            var td3 = document.createElement('td');
                            var img3 = document.createElement("img");
                            img3.setAttribute("src", data[yoso1][i]['pic_file']);
                            var aTag3 = document.createElement('a');
                            aTag3.onclick= function() {
                              $.ajax({
                                  url: '/showuser',
                                  type:'POST',
                                  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                                  dataType: 'html',
                                  data: {
                                    "user_id" : data[yoso1][i]['user_id'],
                                  },
                                  success: function(html) {
                                    document.open();
                                    document.write(html);
                                    document.close();
                                  },
                                  error: function () {
                                      alert("読み込み失敗");
                                  }
                              });
                            };

                            aTag3.appendChild(img3);
                            td3.appendChild(aTag3);

                            tbody.appendChild(td1);
                            tbody.appendChild(td2);
                            tbody.appendChild(td3);

                          tbody.appendChild(tr);
                        }
                    }
                },
                error: function () {
                    alert("読み込み失敗");
                }
            });
        });
</script>
</head>
<body>
      <table>
        <tbody id="tbodyID"></tbody>
      </table>
</body>
```
実際に画像をクリックするとonclickが実行されないのとPOSTのデータに指定するユーザーIDが最後のインデックスに紐付くユーザーIDが設定されてしまいます。

実現させたいことは
①ユーザーの画像をクリックするとonclickでAjaxが実行されること
②AjaxのPOSTで送るユーザーIDがそれぞれのユーザーIDであること

Laravelあるいはphpとjavascriptの組み合わせが得意な方がいましたらご回答いただけないでしょうか？

	@@ -1 +1 @@
1	- Laravelで~~動的にテ~~ーブルを~~作成し~~ユーザー画像をクリックしたらPOST送信させたい。
1	+ LaravelでDBから取得したデータをtbodyに出力させユーザー画像をクリックしたらPOST送信させたい。

質問編集履歴