заменить bootstrap выбрать теги

Question

Я пытаюсь переключать теги выбора, но значение не согласовано при отправке через ajax. кто-нибудь может сказать мне, что не так

<select id="reacTags" class="selectpicker reacTags" data-live-search="true">
  <option value="pdt">most recent posts</option>
  <option value="mlp">most liked posts</option>
  <option value="mdp">most disliked posts</option>
</select>

<select id="reacTags" class="selectpicker reacTags" data-live-search="true">
  <option value="pil">posts i like</option>
  <option value="pid">posts i dislike</option>
  <option value="cim">comments i made</option>
</select>

var reacTags = "";

$('.reacTags').on('changed.bs.select', function(e) {
  reacTags = e.target.value;
});


// set go to user activity
$('.my-act').on('click', '.my-act-lnk', function() {
  // replace tags
  $('.reacTags').html('<select id="reacTags" class="selectpicker reacTags" data-live-search="true"><option value="pil">posts i liked</option><option value="pid">posts i disliked</option><option value="pic">posts i commented</option><option value="pis">posts i saved</option><option value="cil">comments i liked</option><option value="cid">comments i disliked</option></select>');
  // initialize selectpicker
  $('.reacTags').selectpicker();
  // replace link
  $('.my-act').html('<a href="javascript:void(0)" class="my-srt-lnk link-black"><i class="fa fa-arrow-circle-right"></i> Regular Sort</a>');
});
// back to regular sort
$('.my-act').on('click', '.my-srt-lnk', function() {
  // replace tags
  $('.reacTags').html('<select id="reacTags" class="selectpicker reacTags" data-live-search="true"><option value="pdt">most recent posts</option><option value="mlp">most liked posts</option><option value="mdp">most disliked posts</option><option value="mcp">most commented posts</option><option value="msp">most saved posts</option><option value="mlc">most liked comments</option><option value="mdc">most disliked comments</option></select>');
  // initialize selectpicker
  $('.reacTags').selectpicker();
  // replace link
  $('.my-act').html('<a href="javascript:void(0)" class="my-act-lnk link-black"><i class="fa fa-arrow-circle-left"></i> My Activity</a>');
});

это работает, но после переключения несколько раз значение по умолчанию равно value=pdt и перестает работать в соответствии с любыми другими выбранными тегами

Answer 1

у моего плохого было два идентификатора с плохой семантикой

<div class="o-reac">
	<select id="reacTags1" class="selectpicker reacTags1" data-live-search="true">
	  <option value="pdt">most recent posts</option>
	  <option value="mlp">most liked posts</option>
	  <option value="mdp">most disliked posts</option>
	  <option value="mcp">most commented posts</option>
	  <option value="msp">most saved posts</option>
	  <option value="mlc">most liked comments</option>
	  <option value="mdc">most disliked comments</option>
	</select>
</div>

<div class="i-reac">
	<select id="reacTags2" class="selectpicker reacTags2" data-live-search="true">
	  <option value="pil">posts i liked</option>
	  <option value="pid"> posts i disliked</option>
	  <option value="pis"> posts i saved</option>
	  <option value="cim"> comments i made</option>
	  <option value="cil">comments i liked</option>
	  <option value="cid">comments i disliked</option>
	</select>
</div>

$('.reacTags1').on('changed.bs.select', function (e) {
        reacTags = e.target.value;
    });
    $('.reacTags2').on('changed.bs.select', function (e) {
        reacTags = e.target.value;
    });
    
    
    // set go to user activity
    $('.my-act').on('click', '.my-act-lnk', function() {
      // toggle visibility
      $('.o-reac').hide();
      $('.i-reac').show();
      // set new val
      reacTags = $('#reacTags2').val();
      // replace link
      $('.my-act').html('<a href="javascript:void(0)" class="my-srt-lnk link-black"><i class="fa fa-arrow-circle-right"></i> Regular Sort</a>');
    });
    // back to regular sort
    $('.my-act').on('click', '.my-srt-lnk', function() {
      // toggle visibility
      $('.i-reac').hide();
      $('.o-reac').show();
      // set new val
      reacTags = $('#reacTags1').val();
      // replace link
      $('.my-act').html('<a href="javascript:void(0)" class="my-act-lnk link-black"><i class="fa fa-arrow-circle-left"></i> My Activity</a>');
    });

`