JSFiddle - React, Tailwind, and code Playground

HTML

<div id="exp-display-choice">
    <div id="rests"></div>
    <div class="exp-choices" id = "tests">
        <ul class="choices">
            <p>Results:</p>
        </ul>
        <ul class="ad-choices">
            <li>
                <select class="select" id="ad-type">
                    <option value="" selected>Choose Your Pet</option>
                    <option value="Cat">Cat</option>
                    <option value="Dog">Dog</option>	
                    <option value="Wookie">Wookie</option>	
                </select>
            </li>
            <li>
                <select class="ad-size select full-width" id="ad-size">
                    <option value="" selected>Choose Transportation</option>
                    <option value="Planes">Planes</option>
                    <option value="Trains">Trains</option>
                    <option value="Automobiles">Automobiles</option>							
                </select>
            </li>
        </ul>
    </div><!-- end of exp-choices -->
</div><!-- end of exp-display-choices -->
<button id="butttton">click me</button>

CSS

.ad-choices {
    width: 100%;
    margin: 20px 0 20px 0;
    }

.ad-choices{
    list-style: none;
    }

.ad-choices li{
    display: inline-block;
    width: 280px;
    }    	

.choices {
    list-style: none;	
    margin-left: 0;								
    }

.choices li {
    display: inline-block;									
    }

#exp-display-choice {
    margin-bottom: 20px;	
    padding: 20px;
    background: #f1f1f1;								
    }

.btn {
    
    }
}

JavaScript

$("#butttton").on('click',function() {
  $('#tests').clone().appendTo('#rests');
});