How to remove the option data which was selected in previous drop down list from other drop down lists

See more:

Javascript

PHP

Ajax

jQuery

I am facing the issue in Dependent Drop down when I selected the drop-down option, some products display and when I select the other option previous options also show, how to sort out this issue, I am using the empty() function it can create the another issue that if drop down have a single product in the option, product cannot be clickable, this option should be show in my drop down **<option>Select Processor</option>**, empty function can empty all the options from the select tag.How can I resolve this issue?

In the below screenshot when I select **Intel Corei7 3rd Generations** option 3 **RAMS** is available and when I select **Laser jet Printer** option it should show only 1 product I t can show me four, previous drop down data also visible but I don't want previous. How can I sort out this problem.

What I have tried:

<tr class="category processor" data-value="processor">
                                        <td>
                                            <span>Processor</span>
                                        </td> 
                                        <td>
                                          <select name="processor" id="processor" style="min-width: 100%;" class="select processors" onchange="getPrice(event)">
                                            <option>Select Processor</option>
                                            <!-- <?php echo processor_brand($connect); ?> -->
                                          </select>
                                        </td>
                                        <!-- QUANTITY -->
                                        <td>
                                            <input type="number" min="0" name="email" class="quantity" oninput="setTotalPrice(event)"/>
                                        </td>
                                        <!-- per item price -->
                                        <td>
                                            <input type="text"  readonly class="unit-price" >
                                        </td>
                                        <!-- Total Price -->
                                        <td>
                                            <input type="text" readonly  class="total-price">
                                        </td>
                                    </tr>
                             
                                  
                                <!-- End Processor Section -->
        
        
                                <!-- Start Ram Section -->
                                      <tr class="category ram" data-value="ram">
                                        <td>
                                            <span>Ram</span>
                                        </td>
                                          <td>
                                            <select name="ram" id="rams" style="min-width: 100%;" class="select" onchange="getPriceRam(event)">
                                            <option>Select Ram</option>
                                              <!-- <?php echo ram_brand($connect); ?> -->
                                            </select>
                                          </td>
                                          <!-- QUANTITY -->
                                          <td>
                                              <input type="number" maxlength="6" min="0" min="10" name="email" class="quantity" oninput="setTotalPrice(event)"/>
                                          </td>
                                          <!-- per item price -->
                                          <br>
                                          <td>
                                              <input type="text"  readonly class="unit-price" >
                                          </td>
                                          <!-- Total Price -->
                                          <td>
                                              <input type="text" readonly  class="total-price">
                                          </td>
                                      </tr>
                                
                                <!-- End Ram Section -->

<script>
    $("#motherboard").change(function(){
                    var mid = $("#motherboard").val();
                    console.log(mid);
    				$.ajax({
                        url: 'processor_data.php',
                        method: 'post',
                        data: 'mid=' + mid
                    }).done(function(processors) {
                        console.log(processors);
                        processors = JSON.parse(processors);
                        // $('#processor').empty();
                        var htmll = '';
                        processors.forEach(function(processor) {
                            htmll += '<option value="' + processor.id + '">' + processor.product_title + '</option>';
                        })
                        $('#processor').append(htmll);
    
                    });
                })
                function getPriceRam(e){
                                        e.preventDefault();
                                        grandtotal();
                                        var id = $(e.target).val();
                                        // console.log(id);
                                        let parent = e.target.parentNode.parentNode;
                                        // console.log(parent);
                                        let category = parent.getAttribute("data-value");
                                        // console.log(category);
                                        $.ajax({
                                            url:"load_dataram.php",
                                            method:"POST",
                                            data:{id:id},
                                            success:function(data){
                                                // console.log(id);
                                                let unitPrice = parent.querySelector("input.unit-price");
                                                // console.log(unitPrice);
                                                unitPrice.value = data;
                                                $(parent).attr("data-id", id);
                                                $(parent).attr("data-quantity", 1);
                                                parent.querySelector("input.quantity").value = 1;
                                                parent.querySelector("input.total-price").value = +data * 1;
                                                grandtotal();
                                            }
                                        });
                                        }
    			$("#rams").change(function(){
    				var ramid = $("#rams").val();
    				// console.log(ramid);
                })
    
    
    $("#processor").change(function(){
    				var pid = $("#processor").val();
                    $.ajax({
                        url: 'data.php',
                        method: 'post',
                        data: 'pid=' + pid
                    }).done(function(data) {
                        console.log(data);
                        // var_dump(books);
                        //  $('#rams').empty();
                        data = JSON.parse(data);
                        // $('#rams').empty();
                        var html = '';
                        data.forEach(function(value) {
                            html += '<option value="' + value.id + '">' + value.product_title + '</option>';
                        })
                        $('#rams').append(html);
    
                    });
    			})
                function getPriceRam(e){
                                        e.preventDefault();
                                        grandtotal();
                                        var id = $(e.target).val();
                                        // console.log(id);
                                        let parent = e.target.parentNode.parentNode;
                                        // console.log(parent);
                                        let category = parent.getAttribute("data-value");
                                        // console.log(category);
                                        $.ajax({
                                            url:"load_dataram.php",
                                            method:"POST",
                                            data:{id:id},
                                            success:function(data){
                                                // console.log(id);
                                                let unitPrice = parent.querySelector("input.unit-price");
                                                // console.log(unitPrice);
                                                unitPrice.value = data;
                                                $(parent).attr("data-id", id);
                                                $(parent).attr("data-quantity", 1);
                                                parent.querySelector("input.quantity").value = 1;
                                                parent.querySelector("input.total-price").value = +data * 1;
                                                grandtotal();
                                            }
                                        });
                                        }
    			$("#rams").change(function(){
    				var ramid = $("#rams").val();
    				// console.log(ramid);
                })
    </script>