Идентификаторы должны быть уникальными в DOM.Поэтому здесь это можно сделать с помощью классов.Добавьте новый класс ко всем кнопкам с аналогичным действием, например, для.btn-toggle-time
Метод 1
HTML:
<button type="button" data-toggle="collapse" href= "#"
class="btn btn-secondary btn-toggle-time">am</button>
Javascript:
$(document).ready(function(){
$('.btn-toggle-time').on('click', function (e) {
e.preventDefault();
var text = $(this).text();
if(text === "am"){
$(this).html('pm');
} else{
$(this).text('am');
}
});
});
Метод 2
В качестве альтернативы выможет сделать текстовое поле похожим на кнопку, поэтому, когда вы отправляете форму, вам не нужно сохранять значение через javascript.Запустите фрагмент, чтобы увидеть.В этом случае вместо изменения текста вы измените значение текстового поля.
$(".input-meridiem").on('click', function(e){
e.preventDefault();
var meridiem = $(this).val()
if(meridiem === 'AM'){
$(this).val('PM');
} else {
$(this).val('AM');
}
});
input.input-meridiem{
border: none;
padding: 10px 20px;
color: white;
background: #363239;
cursor: pointer;
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input value="AM" class="input-meridiem" name="meridiem" readonly/>