Get the field-index of same-name-combos (select / dropdown), added after page-load

I want to get the field-index of same-names-field i.e. 'item_id[]'. As I select/change an item from 'Item Name' drop-down, its combo-field-index should be shown in 'span' under 'Available' against this dropdown.

Actually the purpose of getting the index of current combo is to show Available-Quantity in 'Span' against this combo under 'Available'.

(dropdown field is named 'item_id[]', index is started from 0, counting from upper most drop down to the current one)

Please copy/paste all code along with Javascript, use 'Add Rows' link and force Javascript/jQuery to work for all rows (previous and newly added elements). Thanks.

<form id="form1" enctype="multipart/form-data" name="form1" method="post" action="">
  <table width="41%" border="0" align="center" cellpadding="0" cellspacing="0" id="contentstable">
    <tr>
      <th width="35%" align="center">Item Name </th>
      <th width="14%" align="center">Quantity </th>
      <th width="26%" align="center">item Sr. # </th>
      <th width="18%" align="center">Store Status </th>
      <th width="18%" align="center">Mode </th>
      <th width="7%" align="center">Available </th>
    </tr>
    <tr>
      <td>
        <select name="item_id[]" id="item_id[]" class="combo" style="width:326px;" onchange="showIssuableQty(this.value);">
          <option value="0"> </option>
          <option value="1">item-1 ( Model# BN004 ) </option>
          <option value="2">item-2-check ( Model# FG-56 ) </option>
          <option value="3">Item - 3 - Piston of Crane's Engine (Hitachi) Large size heavy duty ( Model# machine2-model-3CD ) </option>
        </select>
      </td>
      <td>
        <input name="quantity[]" type="number" id="quantity[]" value="" class="field_3" style="width:99px;">
      </td>
      <td>
        <input name="item_sr_no[]" type="text" id="item_sr_no[]" value="" class="field_3" style="width:199px;">
      </td>
      <td>
        <select name="store_status[]" class="combo" id="store_status[]" style="width:119px;">
          <option value="New" selected="">New </option>
          <option value="Repaired">Repaired </option>
          <option value="Used">Used </option>
        </select>
        <td>
          <select name="type[]" class="combo" id="type[]" style="width:119px;">
            <option value="Consume" selected="">Consume </option>
            <option value="Borrow">Borrow </option>
          </select>
        </td>
        <td>
          <span id="qty_avail">Qty-Here    </span>
        </td>
    </tr>
    <tr>
      <td colspan="6">
        <table width="100%">
          <tr>
            <td width="25%" style="text-align:left; vertical-align:top; font-size:17px">
              <br>
              <span ">    <input name="add_rows " id="add_rows " type="number " value="1 " style="width:63px; " onkeypress="handle_addRows(event); "> &nbsp;     <a href="javascript: " onclick="addRows(); ">Add Rows    </a>    </span">    </td>
    <td width="55%">
    <p id="issuable_qty">Issuable Qty    </p>
    </td>
    <td width="20%" class="submittd" style="text-align:right">    <br>    <input name="save" type="submit" class="submit" id="addnewcategory" value="Save Record">    </td>
    </tr>
    </table>
    </td>
    </tr>
    </tbody>    </table>

 </form>

Javascript Used:

<script>
/*var textboxes = $('select[name="item_id[]"]');

    textboxes.on('change', function() {
    var index = textboxes.index( this );
    alert( this.value + ', ' + index );
    });
    alert('abc');*/

function addMoreRow() {
  var tbl_name = document.getElementById("contentstable");
  var rowCount = tbl_name.rows.length;
  var row = tbl_name.insertRow(rowCount - 1);
  var cell1 = row.insertCell(0);
  cell1.innerHTML = "    <select name=\"item_id[]\" class=\"combo\" id=\"item_id[]\" onchange=\"showIssuableQty(this.value);\" value=\"\" style=\"width:326px;\" >    <option>    </option>    <option value='1'>item-1 ( Model# BN004 )    </option>    <option value='2'>item-2-check ( Model# FG-56 )    </option>    <option value='3'>Item - 3 - Piston of Crane's Engine (Hitachi) Large size heavy duty ( Model# machine2-model-3CD )    </option>    </select>";
  var cell2 = row.insertCell(1);
  cell2.innerHTML = "    <input name=\"quantity[]\" type=\"number\" class=\"input\" id=\"quantity[]\" value=\"\" style=\"width:99px;\" />    <input name=\"prev_quantity[]\" type=\"hidden\" class=\"input\" id=\"prev_quantity[]\" value=\"\" style=\"width:99px;\" />";
  var cell3 = row.insertCell(2);
  cell3.innerHTML = "    <input name=\"item_sr_no[]\" type=\"text\" class=\"input\" id=\"item_sr_no[]\" value=\"\" style=\"width:199px;\" />";
  var cell4 = row.insertCell(3);
  cell4.innerHTML = "    <select name=\"store_status[]\" class=\"combo\" id=\"store_status[]\" value=\"\" style=\"width:119px;\" >    <option value='New' selected >New    </option>    <option value='Repaired'>Repaired    </option>    <option value='Used'>Used    </option>    </select>    <input name=\"prev_store_status[]\" type=\"hidden\" class=\"input\" id=\"prev_store_status[]\" value=\"\" style=\"width:119px;\" />";

  var cell5 = row.insertCell(4);
  cell5.innerHTML = "    <select name=\"type[]\" class=\"combo\" id=\"type[]\" value=\"\" style=\"width:119px;\" >    <option value='Consume' selected >Consume    </option>    <option value='Borrow'>Borrow    </option>    </select>";

  var cell6 = row.insertCell(5);
  cell6.innerHTML = "    <span class=\"qty_avail\">&nbsp;    </span>";

}

function addRows() {
  var add_rows = document.getElementById('add_rows');
  //alert(add_rows.value);
  for ($i = 1; $i <= add_rows.value; $i++) {
    addMoreRow();
  }
}

function handle_addRows(e) {
  if (e.keyCode === 13) {
    e.preventDefault(); // Ensure it is only this code that runs
    addRows();
  }
}

var itemIds = new Array('1', '2', '3');
var itemNames = new Array('', '', '');
var newItems = new Array('2357', '452', '215');
var usedItems = new Array('12', '333', '57');
var toRepairItems = new Array('234', '65', '321');
var repairedItems = new Array('789', '3', '56');
var itemThreshold = new Array('34', '56', '67');

function showIssuableQty(item_id) { // This function is not working properly, see it later.
  document.getElementById('issuable_qty').innerHTML = 'abc';
  var item_index = itemIds.indexOf(item_id);
  var strQtyMsg = 'Issuable Qty (    <b>' + (parseInt(newItems[item_index]) + parseInt(repairedItems[item_index]) + parseInt(usedItems[item_index])) +
    '    </b> )' + '    <br />' + 'New (    <b>' + newItems[item_index] + '    </b> ), Repaired (    <b>' + repairedItems[item_index] + '    </b> ), Used (    <b>' + usedItems[item_index] + '    </b> )';

  if (parseInt(newItems[item_index]) + parseInt(repairedItems[item_index]) < parseInt(itemThreshold[item_index])) {
    //if( parseInt(newItems[item_index]) + parseInt(repairedItems[item_index])    < 100 ){
    strQtyMsg = strQtyMsg + '    <br />Qty. below threshold ( ' + itemThreshold[item_index] + ' ) ';
    strQtyMsg = strQtyMsg + '    <a href="../module_request/new_request.php">Request Items    </a>    ';
    alert('Qty. is below threshold! Please generate a request to purchase.');
  }
  document.getElementById('issuable_qty').innerHTML = strQtyMsg;
  //alert(item_index);
}
</script>