Jquery: <select> with images, having trouble to handle response of two <select> separate

Issue

I am using online jquery to handle images in "select" element of HTML. But now I am facing trouble separating events on each "select" element.

var selectedId = "";
      var langArray = [];
      $(".box").each(function () {
        selectedId = $(this).attr("id");
        $(this)
          .find(".vodiapicker option")
          .each(function () {
            var img = $(this).attr("data-thumbnail");
            var text = this.innerText;
            var value = $(this).val();
            var item =
              '<li><img src="' +
              img +
              '" alt="" value="' +
              value +
              '"/><span>' +
              text +
              "</span></li>";
            langArray.push(item);
          });

        $(this).find("#a").html(langArray);

        //Set the button value to the first el of the array
        $(this).find(".btn-select").html(langArray[0]);
        $(this).find(".btn-select").attr("value", "en");
      });
      //change button stuff on click
      $("li").click(function () {
        var img = $(this).find("img").attr("src");
        var value = $(this).find("img").attr("value");
        var text = this.innerText;
        var item =
          '<li><img src="' + img + '" alt="" /><span>' + text + "</span></li>";
        $(".btn-select").html(item);
        $(".btn-select").attr("value", value);
        $(".b").toggle();
        //console.log(value);
      });

      $(".btn-select").click(function () {
        $(".b").toggle();
      });

      //check local storage for the lang
      var sessionLang = localStorage.getItem("lang");
      if (sessionLang) {
        //find an item with value of sessionLang
        var langIndex = langArray.indexOf(sessionLang);
        $(".btn-select").html(langArray[langIndex]);
        $(".btn-select").attr("value", sessionLang);
      } else {
        var langIndex = langArray.indexOf("ch");
        $(".btn-select").html(langArray[langIndex]);
        //$('.btn-select').attr('value', 'en');
      }

      .vodiapicker {
        display: none;
      }

      #a {
        padding-left: 0px;
      }

      #a img,
      .btn-select img {
        width: 18px;
      }

      #a li {
        list-style: none;
        padding-top: 5px;
        padding-bottom: 5px;
      }

      #a li:hover {
        background-color: #f4f3f3;
      }

      #a li img {
        margin: 5px;
      }

      #a li span,
      .btn-select li span {
        margin-left: 30px;
      }

      /* item list */

      .b {
        display: none;
        width: 100%;
        max-width: 350px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 5px;
      }

      .open {
        display: show !important;
      }

      .btn-select {
        margin-top: 10px;
        width: 100%;
        max-width: 350px;
        height: 34px;
        border-radius: 5px;
        background-color: #fff;
        border: 1px solid #ccc;
      }

      .btn-select li {
        list-style: none;
        float: left;
        padding-bottom: 0px;
      }

      .btn-select:hover li {
        margin-left: 0px;
      }

      .btn-select:hover {
        background-color: #f4f3f3;
        border: 1px solid transparent;
        box-shadow: inset 0 0px 0px 1px #ccc;
      }

      .btn-select:focus {
        outline: none;
      }

      .lang-select {
        margin-left: 50px;
      }

<script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
<div class="box" id="one">
      <select class="vodiapicker">
        <option>Select one</option>
        <option value="en" class="test" data-thumbnail="images/3.png">
          English
        </option>
        <option value="au" data-thumbnail="images/3.png">Engllish (AU)</option>
      </select>

      <div class="lang-select">
        <button class="btn-select" value=""></button>
        <div class="b">
          <ul id="a"></ul>
        </div>
      </div>
    </div>
    <div class="box" id="two">
      <select class="vodiapicker">
        <option>Select one</option>
        <option value="en" class="test" data-thumbnail="images/3.png">
          french
        </option>
        <option value="au" data-thumbnail="images/3.png">french F</option>
      </select>

      <div class="lang-select">
        <button class="btn-select" value=""></button>
        <div class="b">
          <ul id="a"></ul>
        </div>
      </div>
    </div>

When I click on a select element, both are opening and plus, the content on HTML is separate for both div, but when I click on select dropdown two, it shows the content of one as well.

Solution

This should do it,

You might want to change the image on the button and use ccs to add it as it block the click of the button because its effectively on top o it as is the text,

$(function() {
  $(".box").each(function() {
    let selectedId = "";
    let langArray = [];
    selectedId = $(this).attr("id");
    $(this)
      .find(".vodiapicker option")
      .each(function() {
        let img = $(this).attr("data-thumbnail");
        let text = this.innerText;
        let value = $(this).val();
        let item =
          '<li><img src="' +
          img +
          '" alt="" value="' +
          value +
          '"><span>' +
          text +
          "</span></li>";
        langArray.push(item);
      });

    $(this).find("#a").html(langArray);
    //Set the button value to the first el of the array
    $(this).find(".btn-select").html(langArray[0]);
    $(this).find(".btn-select").attr("value", "en");
  });
  $(document).click(function() {
    if ($(event.target).is("button.btn-select") === false) {
      $(".box").each(function() {
        if ($(this).find(".b").is(':visible')) {
          $(this).find(".b").toggle();
        }
      })
    }
  })
  //change button stuff on click
  $("li").click(function() {
    let img = $(this).find("img").attr("src");
    let value = $(this).find("img").attr("value");
    let text = this.innerText;
    let item =
      '<li><img src="' + img + '" alt="" /><span>' + text + "</span></li>";
    $(this).parents("div.lang-select").find(".btn-select").html(item);
    $(this).parents("div.lang-select").find(".btn-select").attr("value", value);
    $(this).parents("div.lang-select").find(".b").toggle();
    //console.log(value);
  });

  $(".btn-select").click(function() {
    $(this).parents("div.lang-select").find(".b").toggle();
    if (($(this).parents("div, .box")[1].id === "two") &&
      ($("#one").children("div.lang-select").find(".b").is(':visible'))) {
      $("#one").children("div.lang-select").find(".b").toggle();
    } else if (($(this).parents("div, .box")[1].id === "one") &&
      ($("#two").children("div.lang-select").find(".b").is(':visible'))) {
      $("#two").children("div.lang-select").find(".b").toggle();
    }
  });
});

.vodiapicker {
  display: none;
}

#a {
  padding-left: 0px;
}

#a img,
.btn-select img {
  width: 18px;
}

#a li {
  list-style: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

#a li:hover {
  background-color: #f4f3f3;
}

#a li img {
  margin: 5px;
}

#a li span,
.btn-select li span {
  margin-left: 30px;
}


/* item list */

.b {
  display: none;
  width: 100%;
  max-width: 350px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

.open {
  display: show !important;
}

.btn-select {
  margin-top: 10px;
  width: 100%;
  max-width: 350px;
  height: 34px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.btn-select li {
  list-style: none;
  float: left;
  padding-bottom: 0px;
}

.btn-select:hover li {
  margin-left: 0px;
}

.btn-select:hover {
  background-color: #f4f3f3;
  border: 1px solid transparent;
  box-shadow: inset 0 0px 0px 1px #ccc;
}

.btn-select:focus {
  outline: none;
}

.lang-select {
  margin-left: 50px;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="box" id="one">
  <select class="vodiapicker">
    <option>Select one</option>
    <option value="en" class="test" data-thumbnail="images/3.png">
      English
    </option>
    <option value="au" data-thumbnail="images/3.png">Engllish (AU)</option>
  </select>

  <div class="lang-select">
    <button class="btn-select" value=""></button>
    <div class="b">
      <ul id="a"></ul>
    </div>
  </div>
</div>
<div class="box" id="two">
  <select class="vodiapicker">
    <option>Select one</option>
    <option value="en" class="test" data-thumbnail="images/3.png">
      french
    </option>
    <option value="au" data-thumbnail="images/3.png">french F</option>
  </select>

  <div class="lang-select">
    <button class="btn-select" value=""></button>
    <div class="b">
      <ul id="a"></ul>
    </div>
  </div>
</div>

I hope this helps

Answered By - Patrick Hume