JSFiddle - React, Tailwind, and code Playground

HTML

<section class="modal-questions">

            <form id="form001" name="form001" method="post">

                <div class="modal-questions-list">
                    <ol>
                        <!-- question 01 -->
                        <li class="li-visible">
                            <h4>Question 01</h4>

                            <input id="opt1a" type="radio" name="Q1" value="1">
                            <label for="opt1a">Option 1a</label>

                            <input id="opt2a" type="radio" name="Q1" value="1">
                            <label for="opt2a">Option 2a</label>
                        </li>

                        <!-- question 02 -->
                        <li>
                            <h4>Question 02</h4>

                            <input id="opt1b" type="radio" name="Q2" value="1">
                            <label for="opt1b">Option 1b - if i click "back" i want to hide that button</label>

                            <input id="opt2b" type="radio" name="Q2" value="1">
                            <label for="opt2b">Option 2b</label>
                        </li>

                        <!-- question 03 -->
                        <li>
                            <h4>Question 03</h4>

                            <input id="opt1c" type="radio" name="Q3" value="1">
                            <label for="opt1c">Option 1c</label>

                            <input id="opt2c" type="radio" name="Q3" value="1">
                            <label for="opt2c">in the 2nd last question, when click "continue" i want to hide that button and show "send" button</label>
                        </li>

                        <!-- question 04 -->
                        <li>
                            <h4>Question 04 - last</h4>

                            <input id="opt4b" type="radio" name="Q4" value="1">
                            <label for="opt4b">in this last question i want to show button "send" and hide...

CSS

.modal-questions-list label {
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: white;
  cursor: pointer;
  position: relative;
  padding: 0 15px 0 45px;
  font-size: 13px; }

  .modal-questions-list label:before {
    position: absolute;
    left: 15px;
    top: 15px;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
    border-radius: 8px; }

  .modal-questions-list label:hover {
    background-color: #eaeaea; }

.modal-questions-list input[type=radio] {
  display: none; }

  .modal-questions-list input[type=radio]:checked + label:before {
    content: "\2022";
    color: white;
    font-size: 30px;
    text-align: center;
    line-height: 18px; }

  .modal-questions-list input[type=radio]:checked + label {
    background-color: #49A4DB;
    color: white; }

.modal-questions-list ol li {
  display: none; }

.modal-questions-list ol li.li-visible {
  display: block;
  background-color: red; }

JavaScript

$('#prevStep, #finalStep').hide();

$('.modal-bottom').on('click', '#nextStep', function() {
    var i = $('li.li-visible').removeClass('li-visible').next().addClass('li-visible').is(':last-child');
    $(this).toggle(!i);
    $('#finalStep').toggle(i);
    $('#prevStep').show();
});

$('.modal-bottom').on('click', '#prevStep', function() {
    var i = $('li.li-visible').removeClass('li-visible').prev().addClass('li-visible').is(':last-child');
    $('#nextStep').toggle(!i);
    $('#finalStep').toggle(i);
    $(this).toggle(!$('li.li-visible').is(':first-child'));
});