title: how can i make unque id in jQuery and send to the html
body: <p>id = menu_selected_id sending each value by loop but when i receiving the data in HTML it just showing the first value. i think because of the unique id it happening</p>
  <p>My question is how can i make a unque id for this menu_id_selected in html and jquery</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('select[name="menu_item_category_selected"]').on('change', function() {
      var countryID = $(this).val();
      if (countryID) {
        $.ajax({
          url: '/admin/menu/item/entry1/' + countryID,
          type: "GET",
          dataType: "json",
          success: function(data) {
            console.log(data);
            $('select[id="menu_selected_id"]').empty();
            $.each(data, function(key, value) {
              $('select[id="menu_selected_id"]').append('&lt;option value="' + key + '"&gt;' + value + '&lt;/option&gt;');
            });
          }
        });
      } else {
        $('select[id="menu_selected_id"]').empty();
      }
    }).change();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="form-group row"&gt;
    &lt;label for="menu_category" class="col-md-4 col-form-label text-md-right"&gt;{{ __('Menu Category') }}&lt;/label&gt;
    &lt;div class="col-md-6"&gt;
      &lt;select class="form-select" name="menu_item_category_selected" id="menu_item_category_selected"&gt;
        &lt;option value="Menu Item" disabled&gt; --Select Menu Category-- &lt;/option&gt;
        @foreach($menu_category as $role)
        &lt;option value="{{$role-&gt;id}}"&gt;{{$role-&gt;name}}&lt;/option&gt;
        @endforeach
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group row"&gt;
    &lt;label for="menu" class="col-md-4 col-form-label text-md-right"&gt;{{ __('Menu') }}&lt;/label&gt;
    &lt;div class="col-md-6"&gt;
      &lt;select class="form-select" name="menu_id_selected" id="menu_selected_id"&gt;
        &lt;option value="" disabled&gt;--Select Menu--&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  ```</code></pre>
  </div>
  </div>
  </p>