custom dropdown not appearing in ajax request

Hello,
I’m trying to add a tags dropdown to the search which allows user to search by post_tags. I have added my own custom template, added the dropdown, added the wpsl-custom-dropdown class to the select tag. When i submit the search form there is no value for my dropdown appearing in the network tab of chrome dev tools. Here is the relevant code:

functions.php:
function custom_map_tag_menu() {
$tags_array = get_tags( $args );
// var_dump($tags_array);die;
$html = ”;
$html .= ‘<div id=”wpsl-tags”>’;
$html .= ‘<label for=”wpsl-tags-list”>Tags filter</label>’;
$html .= ‘<div class=”wpsl-dropdown”>’;
$html .= ‘<select name=”wpsl-tags” id=”wpsl-tags-list” class=”wpsl-custom-dropdown” style=”display: none;”>’;
$html .= ‘<option value=”0″>Any</option>’;
if(!empty($tags_array)){
foreach ($tags_array as $tag) {
$html .= ‘<option value=”‘.$tag->term_id.'”>’.$tag->name.'</option>’;
}
}

$html .= ‘</select>’;
$html .= ‘</div>’;
$html .= ‘</div>’;

return $html;
}

custom.php:
$output .= custom_map_tag_menu();

HTML in chrome inspect window:
<div id=”wpsl-tags”>
<label for=”wpsl-tags-list”>Tags filter</label>
<div class=”wpsl-dropdown”>
<div class=”” style=”display: none; height: 0px;”>
<select name=”wpsl-tags” id=”wpsl-tags-list” class=”wpsl-custom-dropdown” style=”display: none;”>
<option value=”0″>Any</option>
<option value=”4″>Nymphs</option>
<option value=”3″>Pixies</option>
</select>
</div>
<span data-value=”4″ class=”wpsl-selected-item”>Nymphs</span>
<div style=”height: 0px;”>

<li data-value=”0″>Any
<li data-value=”4″ class=”wpsl-selected-dropdown”>Nymphs
<li data-value=”3″>Pixies

</div>
</div>
</div>

Values in ajax call as viewed in chrome network tab:
action: store_search
lat: 53.4874254
lng: -2.249531700000034
max_results: 25
search_radius: 50
filter: 13

‘filter’ refers to the default category dropdown.

Any ideas?

Many Thanks