JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 3 identical cases, slightly different replaceWith() invocation for each -->

<div id="case1" class="case">
    <p>CASE1</p>
    <button>BAM</button>
    <button>BAM</button>
    <button>BAM</button>
</div>

<div id="case2" class="case">
    <p>CASE2</p>
    <button>BAM</button>
    <button>BAM</button>
    <button>BAM</button>
</div>

<div id="case3-source">
    <p>CASE3 SORUCE ELEMENTS</p>
    <input value="BOOM"/><input value="BANG"/><br/>
</div>

<div id="case3" class="case">
    <p>CASE3</p>
    <button>BAM</button>
    <button>BAM</button>
    <button>BAM</button>
</div>

CSS

.case,#case3-source {   
    padding: 10px; margin: 10px; border: solid 1px red;
}
#case3-source {
    border: solid 1px yellow;
}
.case {
    background-color: rgba(255, 0, 0, 0.3);
}
.case.pass {
    border-color: green;
    background-color: rgba(0, 255, 0, 0.3);
}

JavaScript

$(function () {
    // execute: each 'case' should have its 3 buttons replaced with 3 sets of inputs each followed by a <br>

    // case1: replace with HTML string, works because it gets to create the new elements each time
    $('#case1 > button').replaceWith('<input value="BOOM"/><input value="BANG"/><br/>')
    // case2: replace with pre-created elements, doesn't work because they are not cloned, they are inserted 3 
    // times but because they are not cloned the previous insertion is undone each time
    $('#case2 > button').replaceWith($('<input value="BOOM"/><input value="BANG"/><br/>'))
    // case3: pluck elements already in the DOM, same effect as case2
    $('#case3 > button').replaceWith($('#case3-source > :not(p)'))

    // validate: give a green border where we have what we expect
    $('.case').each(function () {
        $(this).find('input').length == 6 && $(this).find('br').length == 3 && $(this).addClass('pass')
    })
})