JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>Когда доставить</label>
  <div>
    <input id="delivery-now" class="active" type="button" value="Доставить сейчас">
  </div>
  <div>
    <input id="delivery-time" type="button" value="Доставить ко времени">
  </div>
  <div id="delivery-text" class="container-for-input hidden active">
    <div class="icon-time">
      Ориентировочное время доставки 45 минут
    </div>
  </div>
  <div class="container-for-input hidden">
    <input id="date" type="text" >
    <div>Дата</div>
  </div>
  <div class="container-for-input hidden">
    <div id="left-h"></div>
    <input id="hours" type="text" placeholder="12">
    <div id="right-h"></div>
  </div>
  <div class="container-for-input hidden">
    <div id="left-m"></div>
    <input id="minutes" type="text" placeholder="30">
    <div id="right-m"></div>
  </div>
</div>

CSS

.container-for-input.hidden.active{
    display: block;
}
.container-for-input.hidden{
    display: none;
}
input[type="button"].active {
    border: 1px blue solid;
}

JavaScript

$("#delivery-now").on('click', function(e){
    if(!$('#delivery-now').hasClass('active')) {
        $(this).toggleClass('active',true);
        $('#delivery-text').toggleClass('active',true);
        $('#date').parent('.container-for-input.hidden').removeClass('active');
        $('#hours').parent('.container-for-input.hidden').removeClass('active');
        $('#minutes').parent('.container-for-input.hidden').removeClass('active');
        $("#delivery-time").removeClass('active');
        localStorage.setItem("activeButton", $(".active").attr("id"));
    }
});
$("#delivery-time").on('click', function(e){
    if(!$('#delivery-time').hasClass('active')) {
        $(this).toggleClass('active',true);
        $('#delivery-text').toggleClass('active',true);
        $('#date').parent('.container-for-input.hidden').toggleClass('active',true);
        $('#hours').parent('.container-for-input.hidden').toggleClass('active',true);
        $('#minutes').parent('.container-for-input.hidden').toggleClass('active',true);
        $("#delivery-now").removeClass('active');
        $('.container-for-input.hidden.active .icon-time').parent('.container-for-input.hidden.active').removeClass('active');
        localStorage.setItem("activeButton", $(".active").attr("id"));
    }
});
$('#left-h').on('click' ,function (e) {
    var $hours = +$(this).next('#hours').attr('placeholder');
    if($hours == 0){
        $hours = 23;
        $(this).next('#hours').attr('placeholder',$hours);
    }
    else{
        $(this).next('#hours').attr('placeholder',--$hours);

    }
});
$('#right-h').on('click' ,function (e) {
    var $hours = +$(this).prev('#hours').attr('placeholder');
    if($hours == 23){
        $hours = 0;
        $(this).prev('#hours').attr('placeholder',$hours);
    }
    else{
        $(this).prev('#hours').attr('placeholder',++$hours);
    }
});
$('#left-m').on('click' ,function (e) {
    var $hours = +$(this).next('#minutes').attr('placeholder');
    if($hours == 0){
       ...