JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content" id="content1">Content 1</div>
<div class="content" id="content2">Content 2</div>
<div class="content" id="content3">Content 3</div>
<div class="content" id="content4">Content 4</div>

<ul class="addReview">
        <li><p>Input 1</p><input type="text" name="input1" value="" id="input1" autocomplete="off" maxlength="2"  /></li>
        <li><p>Input 2</p><input type="text" name="input2" value="" id="input2" autocomplete="off" maxlength="2"  /></li>
        <li><p>Input 3</p><input type="text" name="input3" value="" id="input3" autocomplete="off" maxlength="2"  /></li>
        <li><p>Input 4</p><input type="text" name="input4" value="" id="input4" autocomplete="off" maxlength="2"  /></li>
    </ul>

JavaScript

$(document).ready(function() {
    var $contentDivs = $("div.content").hide();
    
    $('.addReview input[type="text"]').focus(function() {
       $contentDivs.hide();
       $('#' + this.id.replace(/input/, "content")).show();
    });
});