JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<h1>Compare Congress</h1>
<ol>
    <li>Select a Politician to be compared</li>
    <li>Select a Second Politician to be Compared Against</li>
    <li>Vote for Neither: Vote Pirate Party</li>
</ol>
<select name="person1">
  
</select>

<button class="show">Choose 2nd Politician</button>
<select name="person2">
</select>

CSS

/** hide second list of options from user until first selection has been made **/
select[name="person2"]{display:none}

JavaScript

$(document).ready(function () {
    $.getJSON("https://congress.api.sunlightfoundation.com/legislators?per_page=all&apikey=ebbe9f8409134303aab01479e8f1a42f", function (data) {
        $.each(data.results, function () {
            var ele = $("<option>").attr('value', this['bioguide_id'])
            					   .text(this['first_name'] + " " + this['last_name']);
           	$("select").append(ele.clone());
            
            
            // show 2nd list of options only after user has selected first. doing this with button and not on selection because user could easily make 
            // an erroneous choice
            // another option here is to grey it out until the button is clicked....
            $(".show").click(function() {
                $("select[name='person2']").show();
            });

            
        });
    });
});