JSFiddle - React, Tailwind, and code Playground

by webxz

HTML

<div>
    <span class="quest" data-query="moscow">Вопросник moscow?</span>
</div>

<div>
    <span class="quest" data-query="spb">Вопросник spb?</span>
</div>

<div>
    <span class="quest">Вопросник default?</span>
</div>

JavaScript

jQuery(document).ready(function(){
	var $document = jQuery(document);
    
    $document.on('click', '.quest', function(e){
        var $this = $(this),
            $questdiv = $this.next('.questdiv');

		if (!$questdiv.length) {            
        	$questdiv = $('<div />', {            	
				class: 'questdiv',
				html : '<span>' + getAnswer($this.data('query')) + '</span>',
            });
            
            $questdiv.hide();
        	$this.after($questdiv);            
        }
        
        $questdiv.toggle();        
    }); 
    
    function getAnswer(query) {
		var data = {
                'moscow'  : 'инфа №0',
                'spb'     : 'инфа №1',
                'gorod'   : 'инфа №2',
                'default' : 'инфа №3',
            };  
        
        return query in data ? data[query] : data['default'];
    }
});