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() {
    $('.block.two').empty().append($('.block:first').clone(true).contents());

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