foreach内でのjQueryイベントの仕組みについて

foreachで囲っているinputタブに対してclick()イベントを設定しているのですが、

一つ目のinputタブにしかイベントが発火しません。

なぜかわかりません。
どなたご教示ください。

php
1//このコードをforeachで囲っており、複数同じ画像のアイコンが表示されています。
2<div id="icon_cow">
3	<input id="likeButton" type="image" src="<?php echo ROOT_PATH; ?>images/logo.jpg" class="" onclick="">
4		<input type="hidden" name="auto_id" value="<?php echo $value['auto_id']; ?>">
5		<input type="hidden" name="voter_id" value="<?php echo $id; ?>">
6		<input type="hidden" name="submitter_id" value="<?php echo $value['driver_id']; ?>">
7	<i class="far fa-thumbs-up"></i>
8

likeButtonにclick()イベントを設定していますが、一つ目の画像アイコンにはイベントが
発火しますが2つ目以降に発火しない状態です。

jQuery
1//jQueryのコードはbodyの一番下に記入しています。
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3
4  <script type="text/javascript">
5		
6		$('#likeButton').on('click', function(e){
7			console.log(e)
8			$.ajax({
9				type: 'POST',
10				url: "sales_report_like_done_ajaxPost.php",
11				data: {
12					auto_id    : $("input[name=auto_id]").val(),
13					voter_id     : $("input[name=voter_id]").val(),
14					submitter_id     : $("input[name=submitter_id]").val(),
15				}
16			});
17		});
18
19		$('#likeButton').on('click', function(){
20			$('#like_result').load('sales_reportSP.php #like_num');
21		});