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>

<script id="answer-template" type="text/x-mustache-template">
    <![CDATA[
        <span>{{answer}}</span>
        <span class="close">[close]</span>
    ]]>
</script>

JavaScript

$(document).ready(function(){
	var $document = $(document);
    
    $document.on('click', '.quest', function() {
        var $this = $(this),
            $questdiv = $this.next('.questdiv');		
        
		if (!$questdiv.length) {            
        	$questdiv = $('<div />', {            	
            	class: 'questdiv',
                html : getAnswerHTML($this.data('query')),
            });
            
        	$this.after($questdiv);
        }
        
        $questdiv.show();   
    }); 
    
    $document.on('click', '.questdiv .close', function() {    	
    	$(this).closest('.questdiv').hide();
    });
    
    function getAnswerHTML(query) {
 		var data = {
			'moscow'  : 'инфа №0',
			'spb'     : 'инфа №1',
			'gorod'   : 'инфа №2',
			'default' : 'инфа №3',
		};
		
        data = query in data ? data[query] : data['default'];
        
        return $('#answer-template').html()
        	.replace('<![CDATA[', '')
            .replace(']]>', '')
            .replace('{{answer}}', data);
    }
});