JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<h2>Not Working</h2>
<a href="#" data-id="1" id="test">test 1</a>
<a href="#" data-id="2" id="test">test 2</a>
<a href="#" data-id="3" id="test">test 3</a>
<input type="text" id="value1">

<h2>Working</h2>
<a href="#" data-id="1" class="test">test 1</a>
<a href="#" data-id="2" class="test">test 2</a>
<a href="#" data-id="3" class="test">test 3</a>
<input type="text" id="value2">

JavaScript

// Won't work
$('#test').click(function () {
		$('#value1').val($(this).data('id'));
});

// Will work
$('.test').click(function () {
		$('#value2').val($(this).data('id'));
});