I have two Ajax calls on the same page, the first one worked perfectly so I duplicated it and changed the necessary values so they were independent, however, the second Ajax call doesn't work. I've tested it on a separate page and it works fine, it only doesn't work when both calls are on the same page, am I missing something?

jQuery('#lampbase').on('change', function(){
  var basevalue = $(this).val();
  jQuery.ajax({
    url: 'basesfetch.php',
    method: 'post',
    data: {basevalue1: basevalue},
    success: function(result){                    
      $("#baseresponse").html(result);
      $( "select" ).on('change',function() {
        var str = "";
        // For multiple choice
        $( "select option:selected" ).each(function() {
          str += $( this ).val() + " "; 
          console.log(str);
        });
      });

      jQuery('#lampbase').on('change', function(){
        $(".lampoptions").fadeIn();
      });
      
      jQuery("#lampcolor").change(function(e){
        var DefaultOption = $('option:selected', this).data('code');
        $("#detailcolor option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#FlexColour option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#Switch option[data-code='" + DefaultOption + "']").prop("selected", true);
      });
      
      $("select option").val(function(idx, val) {
        $(this).siblings("[value='"+ val +"']").hide();
      });          
    }
  });
});

jQuery('#lampshade').on('change', function(){
  var shadevalue = $(this).val();
  jQuery.ajax({
    url: 'shadefetch.php',
    method: 'post',
    data: {shadevalue1: shadevalue},
    success: function(result){                    
      $("#shaderesponse").html(result);
      $( "select" ).on('change',function() {
        var str = "";
        // For multiple choice
        $( "select option:selected" ).each(function() {
          str += $( this ).val() + " "; 
          console.log(str);
        });
      });
    }
  });
});

HTML Code:

<select id="lampbase">
  <option value="first">Select</option>
  <?php 
    $sql = mysqli_query($connection, "SELECT DISTINCT ProductName FROM TableLamps_CSV");
    while ($row = $sql->fetch_assoc()){
      $productname = $row['ProductName'];
      echo "<option value=\"$productname\">" . $row['ProductName'] . "</option>";
    }
  ?>
</select>

<select id="lampshade">
  <option value="first">Select</option>
  <?php 
    $sql = mysqli_query($connection, "SELECT DISTINCT ShapeName FROM shadetable");
    while ($row = $sql->fetch_assoc()){
      $shapename = $row['ShapeName'];
      echo "<option value=\"$shapename\">" . $row['ShapeName'] . "</option>";
    }
  ?>
</select>