JSFiddle - React, Tailwind, and code Playground

by ipr101

HTML

<table>
    <tr>
        <th>Item No</td>
            <th>Item Name</td>
                <th>Item Price</td>
                    <th>Item No</td>
                        <th>Item Name</td>
                            <th>Item Price</td>
                            </tr>
                                <tr>
                                    <td>1</td>
                                    <td><input type="text" id="name1" /></td>
                                    <td><input type="text" id="price1" /></td>
                                    <td>2</td>
                                    <td><input type="text" id="name2" /></td>
                                    <td><input type="text" id="price2" /></td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td><input type="text" id="name3" /></td>
                                    <td><input type="text" id="price3" /></td>
                                    <td>4</td>
                                    <td><input type="text" id="name4" /></td>
                                    <td><input type="text" id="price4" /></td>
                                </tr>
                            </table>

JavaScript

$("input[type=text]").click(function() {
    $(this).parents('table').find('td,input[type=text]').css("background-color", "transparent");
    var id = this.id.replace('name', '').replace('price', '');
    $("input[type=text]#name" + id).css("background-color", "red");
    $("input[type=text]#price" + id).css("background-color", "red");
    $(this).parent().siblings(":contains('" + id + "')").css("background-color", "red");
})