JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
	<tbody>
		<tr>
			<td><input type="text" class="inputA" value=""></td>
			<td><input type="text" class="inputB" value=""></td>
			<td><input type="text" class="inputC" value=""></td>
		</tr>

		<tr>
			<td><input type="text" class="inputA" value=""></td>
			<td><input type="text" class="inputB" value=""></td>
			<td><input type="text" class="inputC" value=""></td>
		</tr>

		<tr>
			<td><input type="text" class="inputA" value=""></td>
			<td><input type="text" class="inputB" value=""></td>
			<td><input type="text" class="inputC" value=""></td>
		</tr>
	</tbody>
 </table>

JavaScript

jQuery(document).ready(function($) {
	$("tr").on("keyup", "input", function(event) {
		// get the current row
		var $row = $(event.delegateTarget);
		// get the class of the input field being edited
		var this_class = $(this).attr('class');

		if ($(this).val().length > 0) {
			// if the input field has a value, disable all
			// other input fields in the sam row
			$('input:not(.'+this_class+')', $row).prop('disabled', true);
		} else {
			// else enable all input fields
			$('input', $row).prop('disabled', false);
		}
	});
});