JSFiddle - React, Tailwind, and code Playground

HTML

<select class="quantity" id="quantity" name="quantity">
    <option value="0">
        0
    </option>

    <option value="1">
        1
    </option>

    <option value="2">
        2
    </option>

    <option value="3">
        3
    </option>

    <option value="4">
        4
    </option>

    <option value="5">
        5
    </option>

    <option value="6">
        6
    </option>

    <option value="7">
        7
    </option>

    <option value="8">
        8
    </option>

    <option value="9">
        9
    </option>

    <option value="10">
        10
    </option>
</select> 
<!-- here, need to generate following question sets according to number indicated -->
<span class="multiple_questions_container questions_clonable hidden date_selector hidden">
    <span class="method hidden" style="display: block; ">
                    <label for="method">Method?</label>
                    <br>
                    Natural:
                    <input type="radio" id="method2" name="method0" value="natural" class="radio isChanged toggleval">                    Artificial:
                    <input type="radio" id="method" name="method0" value="artificial" class="radio isChanged toggleval">                </span>
</span> 
<!-- End of clonable span, multiple loop !-->

JavaScript

// Dropdown select
    $('#quantity').live("change", function(){

        $('.questions_clonable:not(.questions_clonable:first)').remove();


        // Get value of selection
        var num = $(this).val();

        var cloned_el = $('.questions_clonable').clone();   

        if (num > 1)
        {  
            for (var i = 1; i < num; i++)
            {
                // Assign cloned block to new var
                var new_block = cloned_el;  
                
                 // Store previous number for replacing with current in cloned block input fields
                    var prev = i-1;
                    
                    // Update input name to make it unique
                    new_block.find('input').each(function() {     
                        this.name = this.name.replace(prev, i); 
                        this.id = this.id + i; 
                    });

                // Bit of a workaround needed to clone properly, reiterating class name
                $('.multiple_questions_container').append('<span class="questions_clonable hidden">'+new_block.html()+'</span>');

            }   
        }
    });