I have an option select tag where a user picks the option they want on a drop down.
<div class="button dropdown">
<select id="languageselector">
<option value="english">English</option>
<option value="swahili">Swahili</option>
</select>
</div>
I have noted since I am reusing the same ids, it's failing and giving warnings [DOM] Found 2 elements with non-unique id. The first option loads well but the second option fails to load correctly giving [DOM] Found 2 elements with non-unique id.
Is there a way to disable one based on the selection because I think both are loading the same time hence the conflict?
<div class="button dropdown">
<select id="languageselector">
<option value="english">English</option>
<option value="swahili">Swahili</option>
</select>
</div>
<div id="english" class="language english">
<form id="reviewForm" method="POST" action="/review/post">
<div id="reviewFormPage">
{!! csrf_field() !!}
{!! Form::hidden('business_name', $provider->businessId, ['class'=>'form-control', 'id' => 'businessId']) !!}
{!! Form::hidden('acceptTerms', null, ['class'=>'form-control', 'id' => 'acceptTerms']) !!}
<div class="row">
<div class="col-xs-12">
<div class="checkbox icheck">
<label>
{!! Form::checkbox('existing_customer', '1', false, ['id' => 'existing_customer_review']) !!}
I am an existing customer.
</label>
</div>
</div>
</div>
</form>
</div>
<div id="swahili" class="language swahili">
<form id="reviewForm" method="POST" action="/review/post">
<div id="reviewFormPage">
{!! csrf_field() !!}
{!! Form::hidden('business_name', $provider->businessId, ['class'=>'form-control', 'id' => 'businessId']) !!}
{!! Form::hidden('acceptTerms', null, ['class'=>'form-control', 'id' => 'acceptTerms']) !!}
<div class="row">
<div class="col-xs-12">
<div class="checkbox icheck">
<label>
{!! Form::checkbox('existing_customer', '1', false, ['id' => 'existing_customer_review']) !!}
Mimi ni mteja anayerudi.
</label>
</div>
</div>
</div>
</form>
</div>
The JavaScript code is as below;
<script type="text/javascript">
$(function() {
$('#languageselector').change(function(){
$('.language').hide();
$('#' + $(this).val()).show();
});
});
</script>