Clash Royale CLAN TAG#URR8PPP

I have 4 dropdown and I want to hide them when page loads and then whenever add button is clicked then one dropdown should appear

`

<p class="hide_editor" id="show_editor1">
<label for="subject_primary">Co-Editor 1:</label>
<select name='F_co_author1' id="co_author1" onchange="LoadExperts();">
<option value=''>No Coauthor 1</option>
</select>
</p>

<p class="hide_editor" id="show_editor2">
<label for="subject_primary">Co-Editor 2:</label>
<select name='F_co_author2' id="co_author2" onchange="LoadExperts();">
<option value=''>No Coauthor 2</option>
</select>
</p>

<p class="hide_editor" id="show_editor3">
<label for="subject_primary">Co-Editor 3:</label>
<select name='F_co_author3' id="co_author3" onchange="LoadExperts();">
<option value=''>No Coauthor 3</option>
</select>
</p>

<p class="hide_editor" id="show_editor4">
<label for="subject_primary">Co-Editor 4:</label>
<select name='F_co_author4' id="co_author4" onchange="LoadExperts();">
<option value=''>No Coauthor 3</option>
</select>
</p>



<button id='show_add_button' type="button" class="btn btn-success" style="display: block;">Add Co-Editor</button>

<script type="text/javascript" language="javascript"> // for loading the co-editors

//hide co-editors
$(".hide_editor").hide();

//show co-editor
$("#show_add_button").on("click", function ()
//$('#show_editor1').show();

// $('#show_editor2').show();
);
</script>`


here are four dropdown which is hidden when page loads but now when i click on add button then it should show only first dropdown...again i click on add button then second drpdown sould appear

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.