JSFiddle - React, Tailwind, and code Playground

HTML

<div class="attribImg">
    <img data-id="9" src="images/attributes/black.jpg" alt="Black">
</div>
<div class="attribImg">
    <img data-id="3" src="images/attributes/red.jpg" alt="Black">
</div>
<div class="attribImg">
    <img data-id="7" src="images/attributes/green.jpg" alt="Black">
</div>
<div class="attribImg">
    <img data-id="8" src="images/attributes/blue.jpg" alt="Black">
</div>
    <input type="text" id="id" name="id[1]" value="1">

JavaScript

$('.attribImg').on('click', function () {
    var value = $(this).children('img').data('id');
    alert(value)
    $('#id').val(value); //removed the [1] from id name
});