チャットサービスの発言一つ一つにいいねボタンをつけたが、どのボタンを押しても一番上のボタンのいいね数しか増やすことができない

Question

チャット機能に「いいねボタン」をつけたいと考えております。
ボタンを押すとカウントアップする機能はつけることができましたが、

個別のメッセージに自動生成で割り振られているmessage.idをボタンの方にも割り振ることができればそれぞれの値がつくと思いますが、
やり方をご教授頂けますと幸いです。

<実現したい機能>
ボタンを押す度にいいね数が１増えるボタンをチャットの発言一つ一つに挿入し、いいねの数をデータベースに入れる。

<現状>
ボタンは表示されるものの、どのボタンを押しても一番上の
いいね数がカウントアップされてしまう

var goods = 0;
    function iine(){
    var googids = document.getElementById("goodid");
    goods++;
    googids.value = "いいね" + goods;

(中略)

function renderMessage(message) {
                var message_html = '<p class="texts">' + escapeHTML(message.value.content) + '</p>';
                var date_html = '';
                if (message.value.date) {
                    date_html = '<p class="point-date">'+'<input id="goodid" type="button" name="good" value="いいね" onclick="iine()">' + escapeHTML(new Date(message.value.date).toLocaleString()) + '</p>';
                }
                $("#" + last_message).after('<div id="' + message.id + '" class="post">' + message_html + date_html + '</div>');
                last_message = message.id;
            }

      <div class="thread-container">
                    <div class="messages-container">
                        <div class="messages">
                            <div class="message">
                                <img class="icon" src="">
                                <div class="texts">
                                    <div class="info">
                                        <div class="user"></div>
                                        <div class="time"></div>
                                    </div>
                                    <div class="text"></div>
                                    <div id="messages" class="content">
                                        <div id="dummy"></div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <textarea class="message-form" name="" id="content" maxlength="240" placeholder="Enterで投稿"></textarea>

                    </div>
                </div>

ご教授のほど、よろしくお願いします

Answer 1

問題点は id="goodid" が同じページ上に複数あることです。idは同じページ上に重複なしの一意の値を設定する必要があります。そのため、getElementById("goodid") は先頭のID のみを返します。

---

実装の全体像がわかりませんが、個別のクリックは下記のように取得出来ます。（最近は onclick ではなく addEventListener でイベントを付けるが、全体像がわからないので･･･）

'<input data-id="' + message.id + '" type="button" name="good" value="いいね" onclick="iine(this)">'

function iine( input ) {
	var googids = input.getAttribute( 'data-id' ); // message.id
	console.log( googids );
	
	/* 
		不明。特に個別にカウントする機構がないように見受けられる
	 */
}
```**動くサンプル：**[https://jsfiddle.net/ewb7n92t/](https://jsfiddle.net/ewb7n92t/)