Multiple dropdowns with corresponding values in multiple textboxes respectively

Hi, how to get different values from multiple dropdowns into different input text boxes?

        <fieldset class="form-group">
            <div class="row">
            <label for="inputEmail3" class="col-sm-2 col-form-label">Subject: </label>
                <div class="col-sm-10">
                    <div id="mainSelect" class="input">
                            <?php 
                            $username = $_SESSION['username'];
                            $sql = "SELECT * FROM profile WHERE username = '$username'";
                            $result = mysqli_query($conn, $sql);
                    
                            if(mysqli_num_rows($result) != 0){
                                //output data of each row
                                while($row = mysqli_fetch_assoc($result)){
                                    $subjects = explode(',', $row['subjects']); 
                            ?>
                            <select class="custom-select active" name="subject" id="subject"style="margin-bottom: 5px">
                            <?php
                                foreach($subjects as $key => $subject){               
                                    ?><option value="<?php echo $subject; ?>"><?php echo $subject; ?></option><?php   
                                }
                            ?>   
                            </select>
                            <?php 
                                }
                            }
                            ?>
                        
                        
                    </div>
                    <div class="additional"></div>
                    <a href="#" id="addSubject">Add Subject</a>
                </div>
            </div>
        </fieldset>
        <div class="form-group row">
            <label for="exampleFormControlTextarea1" class="col-sm-2">Lecturer:</label>
            <div class="col-sm-10 lectInput" id="lectDiv">
                <input type="text" id="lect" name="lecturer" class="form-control" style="margin-bottom: 5px" readonly>
            </div>
        </div>
        
$('#addSubject').click(function(e){
                e.preventDefault();
                var cloneIndex = $('.additional').length;
                $('#mainSelect').clone()
                             .children()
                             .removeAttr('id')
                             .attr('id', 'subject'+cloneIndex)
                             .parent()
                             .append($('<a class="deleteBtn" href="#">Remove</a>'))
                             .appendTo($('.additional'));
                
                $('.lectInput').append('<input type="text" id="lect" name="lecturer" class="form-control" style="margin-bottom: 5px" readonly>')
            });

$("#subject").change(function(){
                var pick = $('#subject option:selected').val();
                $.ajax({
                    type: 'POST',
                    url: 'lecture_name.php',
                    dataType: 'json',
                    data: {subject:pick},
                    success: function(response){
                        $('#lect').val(response.name);
                    }
                })
            });
<?php 
    include 'database.php';

    $subject = $_POST['subject'];

    $sql = "SELECT * FROM lect_profile WHERE subject='$subject'";
    $result = mysqli_query($conn, $sql);

    $row = mysqli_fetch_assoc($result);
    
    echo json_encode($row);
?>

How to get the values for another 2 text boxes?

What will you show in the other 2 text boxes? More Lecturer names?

Yes, but different values

Then modify this to handle multiple values.

How? I have tried doing this for a couple of times but still not working.

I would have to see what lecture_name.php url returns.
This should be an array if you want to display multiple values.

lecture_name.php

<?php 
    include 'database.php';

    $subject = $_POST['subject'];

    $sql = "SELECT * FROM lect_profile WHERE subject='$subject'";
    $result = mysqli_query($conn, $sql);

    $row = mysqli_fetch_assoc($result);
    
    echo json_encode($row);
?>

For your information, the first textbox for Lecturer works fine but not the rest

Ok great but what does it return. Can you show the returned JSON object?

image

So from that I see the lecturer is not an array of lecturers.
Are there any more rows returned?

No more rows are returned

Therefore you cannot show more Lecturers.

Yes, that’s why I need help

Check the database records. This is where you need to return multiple rows.
Perhaps you need a joining table so you can associate many lecturers to many subjects.

Info on joins: https://www.w3schools.com/sql/sql_join.asp