JSFiddle - React, Tailwind, and code Playground

by sTEVEDOK

HTML

<div id="demo">

<div class="condition" id="vybir">
 <label>Bydlení</label><input type="radio" name="vybir" value="Bydlení"> 
<label>Podnikani</label>
  <input type="radio" name="vybir" value="Podnikani">
  
</div>

<div class="cond-hide" id="bydleni-1">
 <label>Do místnosti</label><input type="radio" name="bydleni-1" value="Do místnosti"><span></span> 
  <label>Na celý dům/byt</label>
  <input type="radio" name="bydleni-1" value="Na celý dům/byt"><span></span> 
 <a class="back-vybir">back</a>  
</div>

<div class="cond-hide" id="bydleni-1-1">
 <label>do 40m2</label><input type="radio" name="bydleni-1-1" value="do 40m2"><span></span> 
  <label>více 40 m2</label>
  <input type="radio" name="bydleni-1-1" value="více 40 m2"><span></span> 
 <a class="back-bydleni-1">back</a>  
</div>

<div class="cond-hide" id="bydleni-1-2">
  <label>Kolik máte místnosti?</label>
  <input type="text" name="bydleni-1-2" value=""><span></span> 
 <a class="back-bydleni-1">back</a>  
  <a class="dale-1 cond-hide">Dale</a> 
</div>

<div class="cond-hide" id="bydleni-2">
Máte ventilátory v koupelné a kuchyni?
 <label>Ano</label><input type="radio" name="bydleni-2" value="Ano"><span></span> 
  <label>Ne</label>
  <input type="radio" name="bydleni-2" value="Ne"><span></span> 
 <a class="back-bydleni-1">back</a>  
</div>

<div class="cond-hide" id="all-1">
<label>Jak vás oslovit?</label>
  <input type="text" name="all-1" value=""> 
 <a class="back-bydleni-1">back</a>  
  <a class="dale-all-1 ">Dale</a> 
  <p class="required  cond-hide"> REQUIRED</p>
</div>

<div class="cond-hide" id="all-2">
<label>Na jaký email Vám můžeme zaslát výsledky?</label>
  <input type="text" name="all-2" value=""> 
 <a class="back-bydleni-1">back</a>  
  <a class="dale-all-2 ">Dale</a> 
</div>

<div class="cond-hide" id="all-3">
<label>Jaké je Váše telefoní číslo?</label>
  <input type="text" name="all-3" value=""> 
 <a class="back-bydleni-1">back</a>  

</div>


<div class="cond-hide"...

CSS

.cond-hide {
  display:none;
}
.cond-show {
  display:block;
}

.myrequired {
border-color:red;
}

JavaScript

$.fn.myhide = function () {
    (this).addClass("cond-hide");
    (this).removeClass("cond-show");
};
$.fn.myshow = function () {
    (this).addClass("cond-show");
     (this).removeClass("cond-hide");
};

//vybir
$("input[name=vybir]").click(function() {
$( "#vybir" ).myhide();
    if ($(this).val() === 'Bydlení') {   
    $( "#bydleni-1" ).myshow();  
    $( "#Podnikani-1" ).myhide();
    } else if ($(this).val() === 'Podnikani') {
    
$( "#bydleni-1" ).myhide();
$( "#Podnikani-1" ).myshow(); 
    } 
});

//bydleni-1
$("input[name=bydleni-1]").click(function() {
$( "#bydleni-1" ).myhide();
    if ($(this).val() === 'Do místnosti') {   
    $( "#bydleni-1-1" ).myshow();  
    $( "#bydleni-1-2" ).myhide();
    } else if ($(this).val() === 'Na celý dům/byt') {    
$( "#bydleni-1-1" ).myhide();
$( "#bydleni-1-2" ).myshow(); 
    } 
});
//bydleni-1-1
$("input[name=bydleni-1-1]").click(function() {
$( "#bydleni-1" ).myhide();
$( "#bydleni-1-1" ).myhide();
 $( "#bydleni-2" ).myshow();
});

//bydleni-1-2
$("input[name=bydleni-1-2]").click(function() {
$( "#bydleni-1" ).myhide();
    if ($(this).focus) {   
    $( "a.dale-1" ).myshow(); 
    } else if ($(this).val().length < 1)  {    
$( "a.dale-1" ).myhide(); 
    } 
});
//bydleni-2
$("input[name=bydleni-2]").click(function() {

$( "#bydleni-2" ).myhide();
 $( "#all-1" ).myshow();
});


//buttons
$(".back-vybir").click(function() {
$( "#vybir" ).myshow();
$( "#bydleni-1" ).myhide();
$( "#Podnikani-1" ).myhide();

});
//buttons
$(".back-bydleni-1").click(function() {
$( "#bydleni-1" ).myshow();
$( "#bydleni-1-1" ).myhide();
$( "#bydleni-1-2" ).myhide();
$( "#bydleni-2" ).myhide();
$( "#all-1" ).myhide();
$( "#all-2" ).myhide();
$( "#all-3" ).myhide();

});
//buttons
$(".back-bydleni-2").click(function() {
$( "#bydleni-1" ).myshow();
$( "#bydleni-2" ).myhide();

});
//buttons
$(".dale-1").click(function() {
$( "#bydleni-1-2" ).myhide();
$( "#bydleni-2" ).myshow();
});
//buttons
$(".dale-all-1").click(function()...