JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
        <li><a href="#">TAB1</a></li>
        <li><a href="#">TAB2</a></li>
    </ul>
    <form>
    <div class="block">I am in the Tab 1<br><br>
        <div>First Element<input type="text" id="firstElement"></div>
        <div style="height:10px;"></div>
        <div>Second Element<input type="text" id="secondElement"></div>
        <div>The country List<select id="sel">
            <option value="">Please Select</option>
            <option value="US">US</option>
            <option value="UK">UK</option>UK<option value="Fr">France</option>
            </select></div>
    </div>
    <div class="block two">I should have the form fields of first div and some additional ones to be added</div>
    </form>

CSS

ul li{display:inline;list-style:none;margin:0px;padding:5px;border:1px solid #BAD;}
    .block{width:400px;height:200px;border:2px solid #c0c0c0;margin-top:10px;}
    .two{display:none;}

JavaScript

$(function() {
            $("li").click(function() {
                $(this).css("background","red").siblings().css("background","none")
                $(".block").hide().eq($(this).index()).show();
            })
            .eq(0).click();
        })