JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="prepare">
    <ul>
      <li data-mode="seria_number" class="active">Поиск по серии и номеру документа</li>
      <li data-mode="fio_po">Поиск по ФИО и программе обучения</li>
    </ul>
  <div class="error-block">
      <p>Исправьте то, что обведено красным</p>
    </div>
    <div class="d-flex center-flex">
      <div class="prepare-block">
        <p class="input-label">Введите номер документа</p>
        <input type="text" data-id="document" class="custom_one custom-input" value="" placeholder="xxxxxx">
      </div>

      <div class="prepare-block">
        <p class="input-label">Введите серию документа</p>
        <input type="text" data-id="seria" class="custom_two custom-input" value="" placeholder="xxxxxx">
      </div>                
    </div>
  </div>
            <button class="send-btn">test</button>

CSS

.prepare ul li:not(:nth-child(1)){
        margin-left: 10px;
    }
    .prepare ul{
        justify-content: center;
        display: flex;
        
    }
    .prepare ul li{
        list-style: none;
        padding: 10px 0;
        transition: all .3s;
        cursor: pointer;
        color: rgb(0 0 0 / 47%);
    }
    .prepare ul li.active{
        box-shadow: 0 2px 0 0px #0000ee;
        color: black;       
    }
    .prepare ul li:hover{
        list-style: none;
        box-shadow: 0 2px 0 0px #0000ee;
        color: black;
    }
    .error-block{
        text-align: center;
    }
    .error-block p{
        font-size: 14px;
        opacity: 0;
        color: red;
        transition: all .3s;
    }
    .error{
        box-shadow: inset 0 0 0 1px red;
    }

JavaScript

let map = new Map ([
        ['mode', $('ul li.active').data('mode')],
        ['document',$('input[data-id=document]').val()],
        ['seria',$('input[data-id=seria]').val()],
    ]);
    $('input[type=text]').on('keyup keydown paste', function(){
        getid = $(this).data('id');
        map.set(getid,$(this).val());
        $(this).removeClass('error');
    });
    $('.send-btn').click(function(){
        errorHandler();
    });
    function errorHandler(){
        i = 0; size = map.size;
        map.forEach((value, key, map) => {
           
                if (value == '')
                {
                
                    $('.error-block p').css({'opacity':'1'});
                    $('input[data-id='+key+']').addClass('error');
                }else{
                    i++;
                }               
            

          
        });
    }
    $('ul').on('click','li:not(.active)',function(){
        $(this).addClass('active').siblings().removeClass('active');
         console.log(map.size);
        // changeMode
        map.set('mode',$(this).data('mode'));
        $('input').val('');
        

        if ($(this).data('mode') == 'seria_number')
        {
            map.delete('fio');
            map.delete('po');

            // set new id & labels
            $('input[data-id=po').prev().text('Введите серию документа');
            $('input[data-id=fio').prev().text('Введите номер документа');
            
            $('input[data-id=po').val('').attr('data-id','seria');
            $('input[data-id=fio').val('').attr('data-id','document');          

            map.set('seria','');
            map.set('document',''); 

        }
        else{
            map.delete('document');
            map.delete('seria');
            
            // set new id & labels
            $('input[data-id=seria').prev().text('Программа обучения');
            $('input[data-id=document').prev().text('Введите ФИО');
            
           ...