Translate jquery ajax code snippet into HTMX or manage to fetch selector value

I built a 3 interdependent select lists using htmx, (country region town) and I managed to fetch the selected town as I have this on the last part

<select id="localidades" class="form-control-sm custom-select "
    name="town"
    hx-get="{% url 'query_for_properties' %}"
    hx-trigger="change"
    hx-target="#response"
    required>
 <option value="">Select municipality</option>
 {% for z in lista_localidades %}
 <option value="{{z}}">{{z}}</option>

{% endfor %}
</select>`

Here I fetch it alright (notice that I am calling this function from the above snippet)

def query_for_properties(request):
  town = request.GET.get('town')
  etc

as I need that town value for the next code. However, this next code needs to send the values to different targets and for each target a different value, like, number of cars, number of bikes etc to different selectors.And that is where I get stuck.The htmx docs, as usual everywhere, are only for the very simple scenarios, but if you need something else, you are a goner, stranded. I have no idea how to deal out different values to different targets.

So, I tried ajax, and with jquery it was easy to build calls for every selector. However, because I built the interdependent select lists with htmx,ajax query doesn't get the value. Here it goes

<script>

    $(document).ready(function(){
    $("#localidades").on({
    change: function(){
    var ciudad = $('#localidades').val();
    alert(ciudad);
     $.ajax({
              url: 'testing',
              type: "GET",
              'success': function(data) {
              $('#store').html(data);
              }
      }); // close ajax function
      $("#house").css("background-color", "lightgray");

       $.ajax({
              url: 'housecount',
              type: "GET",
              'success': function(data) {
              $('#house').html(data);
              }
      }); // close ajax function

      $("#store").css("background-color", "lightblue")

      $("#response").css("background-color", "yellow");
    },

  });
});
</script>`

when I try to alert the value, I get nothing, empty.

however, because the first select list was built like this:

def index_country(request):
  country = Address.objects.distinct('country')
  print(country)
  return render(request, 'index.html',{'country':country})


<select id="paises" class="form-control-sm custom-select" required
                            name="country"
                            hx-get="{% url 'index_regiones' %}"
                            hx-trigger="change"
                            hx-target="#regiones">
                            <option value="">Select country</option>
                            {% for x in country %}
                                <option value="{{x.country}}">{{x.country}}</option>
                            {% endfor %}
</select>

it gets it alright, var pais = $('#paises').val(); alert(pais);

but it doesn't get it for localidades as I mentioned and showed at the beginning.

I tried first htmx to fetch the value and I did, but then I don't know how to send the results to different targets, so too complicated

With ajax is the opposite, I can deal out different calls to different selectors but I can't fetch the first initial value.

Solution

My diagnosis was not correct and therefore I also failed to mention the point in my question.

Those code snippets for country, region, town were actually injected into the main page. But it turned out that the id of the select list was the same of the div it was injecting itself to. Therefore, the selector value was freaking out not knowing which gender identity to attach to. I instructed it that there could not be an entity with two genders so I changed the name and the problem was solved.