I attempted to adjust the layout of a bootstrap input-group-addon on mobile devices by using two input elements and manipulating their display and visibility properties. From a design standpoint, I achieved the desired result as the input is now positioned behind the addons ... however, there seems to be an issue with the Javascript code that is supposed to run on #input-newsearch when accessed on mobile devices. It appears that the script is still referencing the first input element. What could be causing this problem and how can I resolve it?
HTML:
<div class="input-group">
<input id="input-newsearch" class="form-control input-newsearch-desktop" type="text">
<span class="input-group-addon" id="delete-newsearch">Delete</span>
<span class="input-group-addon" id="remove-newsearch">Remove</span>
<input id="input-newsearch" class="form-control input-newsearch-mobile" type="text">
</div>
CSS:
.input-newsearch-mobile {
display: none;
visibility: hidden;
}
@media (max-width: 768px){
.input-newsearch-desktop {
display: none;
visibility: hidden;
}
.input-newsearch-mobile {
display: initial;
visibility: initial;
}
}
Javascript:
$('#delete-newsearch, #delete-newsearch').on('click', function() {
$('#input-newsearch').val('');
});
$('#input-newsearch').autocomplete({
source:'/source.php',
minLength: 3,
...
});