Javascript not working for multiple datasets

I have a list of persons in a bootstrap table and to delete a single person i am using a form in bootstrap modal. For deleting user needs to select some information for which i have a select box. On select value,different divs are shown. IF user selects married, then div with married_approval class should be show and if user selects Others then div with other class should be shown else both div should be hidden. I have tried this and it works fine for 1st user but for rest of the users show/hide is not working. Please help.

HTML

<div class="row">
  <div class="col-sm-6">
      <div class="form-group">
          <label class="control-label col-sm-4" for="email">Reason</label>
          <div class="col-sm-8">
              <select name="i_deletereason" id="i_deletereason" class="form-select select" onchange="checkselect(this);">
              <option value="Deceased">Deceased</option>
              <option value="Married">Married</option>
              <option value="Others" >Others</option>
              </select>
          </div>
      </div>
  </div>
  <div class="col-sm-6">
      <div class="form-group other" style="display: none;">
          <textarea id="i_deletereason_other" name="i_deletereason_other" class="form-control" placeholder="Please Specify others"  ></textarea>
      </div>
  </div>    
</div>

<div class="row">
  <div class="married_approval" align="center" style="display: none;">
      <div class="col-sm-12">
          <label class="control-label"><b>Married in same cast or other cast ?</b></label>
      </div>
      <div class="col-sm-12" align="center">
          <label class="radio-inline"><input type="radio" name="cast" class="cast" value="same_cast">Same Cast</label>
          <label class="radio-inline"><input type="radio" name="cast" class="cast" value="other_cast">Other Cast</labe>
      </div>
  </div>
</div>

JS:

<script type="text/javascript">

  function checkselect(delSelect){
    var selected_var = $(delSelect).val();
    var other_text=document.getElementsByClassName("other");
    var is_married = document.getElementsByClassName("married_approval");
    console.log('selected_var: '+selected_var);
    //return false;

    switch(selected_var){
      case 'Married':
      {
        console.log('var: '+selected_var);
        other_text[0].style.display='none';
        is_married[0].style.display='block';
        break;
      }
      case 'Others':
      {
        console.log('var: '+selected_var);
        other_text[0].style.display='block';
        is_married[0].style.display='none';
        break;
      }
      default:
      {console.log('var: '+selected_var);
        other_text[0].style.display='none';
        is_married[0].style.display='none';
      }
    }

    }  
</script>