JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<form id="change-page">
    <select>
        <!-- populate this with JavaScript -->
    </select>
</form>
<section class="plant-page" id="perennials">
    	<h3>Perennials</h3>

</section>
<section class="plant-page" id="wildflowers">
    	<h3>Native Wildflowers</h3>

</section>
<section class="plant-page" id="grasses">
    	<h3>Grasses</h3>

</section>
<section class="plant-page" id="ferns">
    	<h3>Native Ferns</h3>

</section>
<section class="plant-page" id="trees">
    	<h3>Native Trees (Village Cost-Share)</h3>

</section>
<section class="plant-page" id="shrubs">
    	<h3>Native Shrubs (Village Cost-Share)</h3>

</section>

JavaScript

var $opts = $('.plant-page').map(function (i, el) {
    return $('<option>').val(el.id).text($('h3', el).text());
}).appendTo('#change-page select');