JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" id="howmanyrooms" value="4" />
        <button id="buttonaddrooms" onclick="javascript: test();">ok</button>
        <div class="design-your-system-page-playground-container">
            <div class="design-your-system-page-house-container">
                <div class="design-your-system-page-house">
                </div>
            </div>
            </div>
            <div class="clearfix"></div>
        </div>

        <div class="design-your-system-page-edit-room-container"></div>

CSS

.design-your-system-page-playground-container {
    display: none;
    width: 100%;
}

.design-your-system-page-house-container {
    text-align: center;
    margin-top: 20px;
    float: left;
    width: 60%;
    display: table-cell;
    border-right: 2px dotted #b5b3b3;
}

.design-your-system-page-house-system-info {
    float: left;
    background: #fafafa;
    width: 39%;
    display: table;
    padding-top: 50px;
    margin-top: 20px;
}

    .design-your-system-page-house-system-info ul {
        display: table-row;
        list-style: none;
        background: red;
        text-align: center;
    }

        .design-your-system-page-house-system-info ul li {
            display: table-cell;
        }

.design-your-system-page-house {
    width: 70%;
    padding-right: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
    overflow: auto;
    margin-bottom: 2px;
    margin-top: -10px;
}

.design-your-system-page-house img {
    width: 100%;
    margin-top: 10px;
    margin-bottom: -5px;
}


.design-your-system-page-rooms {
    width: 30%;
    float: left;
    background: #fafafa;
    height: 100px;
    border: 2px solid black;
    margin-top: 5px;
    text-align: center;
    position: relative;
    margin-left: 10px;
}

.clearfix {
    clear: both;
    content: "";
}


.design-your-system-radiator-number-select {
    background: red;
}


.room-title{color:green;}

JavaScript

var target = "";
        function test() {
            var rooms = $("#howmanyrooms").val();
            var roomcounter = 1;
            $(".design-your-system-page-playground-container").show();
            for (var i = 0; i < rooms; i++) {
                $("<div class='design-your-system-page-rooms targetDiv_" + roomcounter + "'><span class='room-title'>Room-" + roomcounter + "</span></div>").appendTo(".design-your-system-page-house");
                $("<span>Room-" + roomcounter + ":</span>&nbsp;<input type='text' placeholder='name' id='room-" + roomcounter + "-id' class='textInput' lang='targetText_" + roomcounter + "'></br>").appendTo(".design-your-system-page-edit-room-container");
                roomcounter++;
            };
            if ($('.design-your-system-page-house').find('.design-your-system-page-rooms').length) {
                $("#buttonaddrooms").hide();
            }

            $("input.textInput").on("keyup", function () {
                target = $(this).attr("lang").replace("Text", "Div");
                $("." + target).text($(this).val());
            });
          };