JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<div class="question">
<div class="question-text">
    <p>First question?</p>
    </div>
    <div class="answers" data-specific=" First Response">
    <p>First answer</p> 
    </div>
    <div class="answers" data-specific=" Second Response">
    <p>Second answer</p>
    </div>
    <div class="answers" data-specific=" Third Response">
    <p>Third answer</p>
    </div>
</div>

JavaScript

$(document).ready(function(){
    $(document).on('click','.answers p',function()
    {
        var $parent = $(this).parent(); 
        var response = $parent.data("specific");
        $(this).append(response);
        $parent.siblings('.answers').remove();
        $('.answers').addClass('selectedAnswer').removeClass('answers');
        //do work to get next questions
        var newAnswers = '<div class="answers" data-specific="Next First Response">    <p>Next First answer</p>     </div>';
        $('.question').append(newAnswers);
    });
    });