Need help,2 button work same in my code, i want both button work different as according to code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" >

	
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <!-- <title>Redirect page dependent dropdown</title> -->
</head>
<body>

<div class="container pt-5">
 <div class="row  d-flex justify-content-center">
	 <div class="col-md-5 p-4 border">

	 <!-- <h2>Redirect page  dependent dropdown</h2> -->

		<form name="myform" id="myForm">
			<select class="form-select" id="category_sel" size="1">
				<option value="" selected="selected">--Select--</option>
			</select>
			<br>
			<br>
		
			<select class="form-select" id="topic_sel" size="1">
				<option value="" selected="selected">--Select--</option>
			</select>
			<br>
			<br>   
			<center>
			
					</form>
	 </div>
 </div>
</div>
<button type="button" id="filter_s" class="btn btn-primary">Up Regulated</button>
<script>
var countryStateInfo = {
	"Tolerant Normal Potassium": {
		"Tolerant Low Potassium": ["http://www.google.com" ],
		"Sensitive Normal Potassium": ["http://www.amazon.com"],
		},
	"Sensitive Normal Potassium": {
		"Sensitive Low Potassium": ["http://www.msn.com"],
	},
	"Tolerant Low Potassium": {
		"Sensitive Low Potassium": ["http://www.youtube.com"],
	},
}  
window.onload = function () {
	//Get html elements
	var category_sel = document.getElementById("category_sel");
	var topic_sel = document.getElementById("topic_sel");
	var category_sel = document.getElementById("category_sel");
	var topic_sel = document.getElementById("topic_sel");
	//Load countries
	for (var country in countryStateInfo) {
		category_sel.options[category_sel.options.length] = new Option(country, country);
	}
	category_sel.onchange = function () {
		 topic_sel.length = 1; // remove all options bar first
		 if (this.selectedIndex < 1)
			 return; // done
		 for (var state in countryStateInfo[this.value]) {
			 topic_sel.options[topic_sel.options.length] = new Option(state, countryStateInfo[this.value][state]);
		 }}}
$(document).ready(function(){
    $("#filter_s").click(function () {
        if($("#topic_sel option:selected").val() !== ""){
            window.location.href = $("#topic_sel").val();
			
        }})})

		
</script>

<button type="button" id="filter_s1" class="btn btn-primary">down Regulated</button>
<script>
var countryStateInfo = {
	"Tolerant Normal Potassium": {
		"Tolerant Low Potassium": ["http://www.yahoo.com" ],
		"Sensitive Normal Potassium": ["http://www.bing.com"],
		},
	"Sensitive Normal Potassium": {
		"Sensitive Low Potassium": ["http://www.flipkart.com"],
	},
	"Tolerant Low Potassium": {
		"Sensitive Low Potassium": ["http://www.canva.com"],
	},
}  
window.onload = function () {
	//Get html elements
	var category_sel = document.getElementById("category_sel");
	var topic_sel = document.getElementById("topic_sel");
	var category_sel = document.getElementById("category_sel");
	var topic_sel = document.getElementById("topic_sel");
	//Load countries
	for (var country in countryStateInfo) {
		category_sel.options[category_sel.options.length] = new Option(country, country);
	}
	category_sel.onchange = function () {
		 topic_sel.length = 1; // remove all options bar first
		 if (this.selectedIndex < 1)
			 return; // done
		 for (var state in countryStateInfo[this.value]) {
			 topic_sel.options[topic_sel.options.length] = new Option(state, countryStateInfo[this.value][state]);
		 }}}
$(document).ready(function(){
    $("#filter_s1").click(function () {
        if($("#topic_sel option:selected").val() !== ""){
            window.location.href = $("#topic_sel").val();
			
        }})})
		</script> 
</body>
</html>

Can you be more specific about what you expect the code to do that it is not doing?

Maybe give us an example.

I assume you already know this, but just in case, the following code is only needed one time. Duplicating it does nothing more for your code.

    window.onload = function() {
      //Get html elements
      var category_sel = document.getElementById("category_sel");
      var topic_sel = document.getElementById("topic_sel");
      var category_sel = document.getElementById("category_sel");
      var topic_sel = document.getElementById("topic_sel");
      //Load countries
      for (var country in countryStateInfo) {
        category_sel.options[category_sel.options.length] = new Option(country, country);
      }
      category_sel.onchange = function() {
        topic_sel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1)
          return; // done
        for (var state in countryStateInfo[this.value]) {
          topic_sel.options[topic_sel.options.length] = new Option(state, countryStateInfo[this.value][state]);
        }
      }
    }

In this code, both button work same, one button override other button .

I want both button work redirect different link as mention in code

Do you want this to happen?

Can you give an example?

I want both button work differently.

one button should not override other button

I see the following code related to the two buttons.

The reason they are doing the same thing when clicked, is because you are using the same callback function (see below) when either is clicked.

  function () {
    if ($("#topic_sel option:selected").val() !== "") {
      window.location.href = $("#topic_sel").val();
    }
  }

If you want something different to happen, then you need to create a different callback function. Since you still have not explained what you want each button to do, I am unable to help you further.