{% for item in ihc_rows %}
                <tr>
                    <td class="ihc-material-id"><select id="ihc-material-id-{{item.index}}" name="ihc_material_id.{{item.index}}" data-index="{{item.index}}" class="material-id-choice"></select></td>
                    <td class="ihc-short-desc"><div id="ihc-short-desc-{{item.index}}"></div></td>
                    <td class="ihc-science-info"><input type="text" id="ihc-science-info-{{item.index}}" name="ihc_science_info.{{item.index}}" class="row-text" value="{{ item.science_info }}" size="10" /></td>
                    <td class="ihc-antigen"><input type="text" id="ihc-antigen-{{item.index}}" name="ihc_antigen.{{item.index}}" class="row-short-text" value="{{ item.antigen }}" size="3" /></td>
                    <td class="ihc-clonality"><input type="text" id="ihc-clonality-{{item.index}}" name="ihc_clonality.{{item.index}}" class="row-short-text" value="{{ item.clonality }}" size="3" /></td>
                    <td class="ihc-special-instructions"><input type="text" id="ihc-special-instructions-{{item.index}}" name="ihc_special_instructions.{{item.index}}" class="row-text" value="{{ item.special_instructions }}" size="10" /></td>
                </tr>
                {% endfor %}
            <script>
            $(".ihc-table-form .ihc-tbody tr .ihc-material-id .material-id-choice").on('change', function(){
                var selid = $(this).attr('id');
                var index = $(this).attr('data-index');
                var optindex = $("#"+selid+" option:selected").attr('data-index');
                var descval = $("#routine-short-desc-"+optindex).val()
                $("#ihc-short-desc-"+index).html(descval);
                
                console.log("material id dropdown changed: selid="+selid+" index="+index+" optind="+optindex+" descval="+descval);
            });
            </script>