auto populate input fields based on the dropdown selection

Question

I created an auto populate input fields based on the dropdown selection. My problem is the 2nd select box is not populating the corresponding input fields. I know this is wrong because the ID's are the same from select1 but how can I make it work? I need to create around 20 or more select dropdown and I can't figure out how to fix it.

 $('#coursecode').change(function () { var myValue = $(this).val(); var myText = $("#coursecode :selected").text(); if (myText != '' && myText === "11111") { $("#coursename").val("Web Dev"); $("#prerequesite").val("None"); $("#units").val("3"); } else if (myText != '' && myText === "22222") { $("#coursename").val("Math"); $("#prerequesite").val("None"); $("#units").val("3"); } else if (myText != '' && myText === "33333") { $("#coursename").val("English"); $("#prerequesite").val("None"); $("#units").val("3"); } else if (myText != '' && myText === "44444") { $("#coursename").val("Psychology"); $("#prerequesite").val("None"); $("#units").val("3"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="select1"> <select id="coursecode" name="coursecode"> <option value="">Please select...</option> <option value="1">11111</option> <option value="2">22222</option> <option value="3">33333</option> <option value="4">44444</option> </select> <input type="text" id="coursename" name="coursename" value="" readonly> <input type="text" id="prerequesite" name="prerequesite" value="" readonly> <input type="text" id="units" name="units" value="" readonly> </div> <div class="select2"> <select id="coursecode" name="coursecode"> <option value="">Please select...</option> <option value="1">11111</option> <option value="2">22222</option> <option value="3">33333</option> <option value="4">44444</option> </select> <input type="text" id="coursename" name="coursename" value="" readonly> <input type="text" id="prerequesite" name="prerequesite" value="" readonly> <input type="text" id="units" name="units" value="" readonly> </div> 

Answer 1

You can do in this way.

<div class="select1 select-div"><!--add class select-div-->
    <select id="coursecode" name="coursecode">
        <option value="">Please select...</option>
        <option value="1">11111</option>
        <option value="2">22222</option>
        <option value="3">33333</option>
        <option value="4">44444</option>
    </select>

    <input type="text" id="coursename" name="coursename" value="" readonly>
    <input type="text" id="prerequesite" name="prerequesite" value="" readonly>
    <input type="text" id="units" name="units" value="" readonly>
</div>

<div class="select2 select-div"><!--add class select-div-->

    <select id="coursecode" name="coursecode">
        <option value="">Please select...</option>
        <option value="1">11111</option>
        <option value="2">22222</option>
        <option value="3">33333</option>
        <option value="4">44444</option>
    </select>

    <input type="text" id="coursename" name="coursename" value="" readonly>
    <input type="text" id="prerequesite" name="prerequesite" value="" readonly>
    <input type="text" id="units" name="units" value="" readonly>
</div>
<script type="text/javascript">
$(function () {
    $('.select-div').on('change', 'select', function (e) {//use on to delegate
        var v = $(e.target).val(), t = $(e.target).find(':selected').text(), p = $(e.target).closest('.select-div');
        if (v) {
            var c = (function(t) {
                switch(t) {
                    case '11111' : return 'Web Dev';

                    case '22222' : return 'Math';

                    case '33333' : return 'English';

                    case '44444' : return 'Psychology';
                }
            })(t);
            p.find('[name="coursename"]').val(c);
            p.find('[name="prerequesite"]').val('None');
            p.find('[name="units"]').val('3');
        }
    });
});
</script>

fiddle - http://codepen.io/anon/pen/QpdZjJ?editors=1010#0