JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
        <button type="button" class="buttonImgTop cross">Cross</button>
        <div id="ValuWrapper">
            <div id="ifYes" class="yes"> .. </div>
            <div id="ifNo" class="no"> .. </div>
        </div>
    </div>
    <button type="button" class="buttonImg" id="repeat">Repeat</button>

JavaScript

var template = $('#content:first');


    //define counter
    var count = 0;

    //add new section
    $('body').on('click', '#repeat', function() {

        //increment
        count++;

        //remove cross button div
        var clone = template.clone()
            .appendTo('#content').hide()
            .slideDown(500);

        //update id of ifYes & ifNo
        clone.find('.yes').prop("id", "ifYes" + count);
        clone.find('.no').prop("id", "ifNo" + count);

        //loop through each input
        clone.find(':input').each(function() {

            //set id to store the updated section number
            var newId = this.id + count;

            //update id
            this.id = newId;

        }).end()


        return false;
    });

    //remove section
    $('#content').on('click', '.cross', function() {
        //slide up section
        $(this).parent().slideUp(500, function() {
            //remove parent element (main section)
            $(this).empty();
            return false;
        });
        return false;
    });