Why am I always getting the same output in this loop?

Question

I have the following function:

function mattes_create_matte_array(mattes, selected_type)
{
  ...

  $(mattes).each(function(i, el) //loop through the mattes xml
  {
    fillets = $(el).find("fillet")[0];
    console.log("i: " + i);
    if(typeof(fillets) !== "undefined")
    {
      switch (i)
      {
        case 0: fillet_selected_matte = "fillet_matte_layer_top"; console.log(fillet_selected_matte);break;
        case 1: fillet_selected_matte = "fillet_matte_layer_middle"; console.log(fillet_selected_matte);break;
        case 2: fillet_selected_matte = "fillet_matte_layer_bottom"; console.log(fillet_selected_matte);break;
      }


      fillet_change($(fillets).find("imgsrc").text(), $(fillets).find("cid").text(), $(fillets).find("sku").text());
    }

    ...
}

When I output fillet_selected_matte, I always get back "fillet_matte_layer_top", when I am expecting to output each "fillet_matte_layer_..."

console.log(el) is the following

<mat>
  <item size="0">
    <imgsrc>11852997eab43ff5c7b1803692bee608</imgsrc>
    <size>0</size>
    <cpu>20</cpu>
    <cid>4208</cid>
  </item>
  <fillet>
    <imgsrc>113a2584b32539ecdc35d70b39fde504</imgsrc>
    <width>0.31</width>
    <cid>9352</cid>
    <sku>TD00060S1</sku>
  </fillet>
</mat>
<mat>
    <item size="0.5">
    <imgsrc>579767cea6941301e6f91d43580a1948</imgsrc>
    <size>0.5</size>
    <cpu>0</cpu>
    <cid>4390</cid>
  </item>
    <fillet>
    <imgsrc>fee7ec5a4b50b65e94801682ae076a5a</imgsrc>
    <width>0.31</width>
    <cid>9348</cid>
    <sku>TD00052S0</sku>
  </fillet>
</mat>
<mat>
  <item size="0.5">
    <imgsrc>11852997eab43ff5c7b1803692bee608</imgsrc>
    <size>0.5</size>
    <cpu>0</cpu>
    <cid>42089349</cid>
  </item>
  <fillet>
    <imgsrc>5ade25e607b6302691c318a94792e6eb</imgsrc>
    <width>0.31</width>
    <cid>9349</cid>
    <sku>TD00060GL1</sku>
  </fillet>
</mat>

Here's the code for fillet_change:

function fillet_change(thumb, cid, sku)
{
  if (mattes_selected_type == 15) //letter mattes
  {
    alert("Fillets can only be applied to rectangular openings. Your current layout does not contain any rectangular openings, fillet was not applied");
    return;
  }
  var img = new Image();
  img.src =  SITE_URL + '/system/components/compimg/' + thumb + '/pattern';
  img.onload = function() 
  {
    width = .31;
    img.width = width * ppi; //TODO: Get actual width from xml?
    img.height = width * ppi; //TODO: Get actual width from xml?
    $( document ).ready(function() 
    {
      $("div[id^='opening_']").each(function(i) //for each div that has an id of opening_(number) 
      {
        //Set the values in the array with the width and height
        switch(fillet_selected_matte)
        {
          case "fillet_matte_layer_bottom": 
            moulding_matte_canvas_width[i] = $("#opening_" + i).width();
            moulding_matte_canvas_height[i] = $("#opening_" + i).height();
            index = 2;
            break;

          case "fillet_matte_layer_middle": 
            moulding_matte_canvas_width[i] = $("#opening_" + i).width() + 10;
            moulding_matte_canvas_height[i] = $("#opening_" + i).height() + 10;
            index = 1;
            break;

          case "fillet_matte_layer_top": 
            if (mattes_default_selected == true)
            {
              moulding_matte_canvas_width[i] = $("#opening_" + i).width() + 22;
              moulding_matte_canvas_height[i] = $("#opening_" + i).height() + 22;
            }
            else
            {
              moulding_matte_canvas_width[i] = $("#opening_" + i).width();
              moulding_matte_canvas_height[i] = $("#opening_" + i).height();
            }
            index = 0;
            break;
        }
        var parser = new DOMParser(); //create a new DOMParser
        var doc = parser.parseFromString(mattes_get_mattes_xml(), "application/xml"); //convert the string to xml
        doc.getElementsByTagName('fillet')[index].innerHTML = "<imgsrc>" + thumb + "</imgsrc><width>" + width + "</width><cid>" + cid + "</cid><sku>" + sku + "</sku>";
        var serializer = new XMLSerializer(); //create a new XMLSerializer
        mattes_mattes_xml = serializer.serializeToString(doc); //convert the xml back to a string

        common_get_order_xml();
        moulding_draw(img, "fillet"); //Call the moulding_draw function, which draws the fillet on the canvas
      });
    });
  };
}

Here's the code for moulding_draw:

function moulding_draw(img, fillet)
{
  $(document).ready(function() { 
    $("div[id^='opening_']").each(function(i) //for each div that has an id of opening_(number)
    {
      if (fillet == "fillet")
      {
        $("#fillet_canvas_" + fillet_selected_matte + "_" + i).remove(); //remove the selected filet canvas
      }
      else
      {
        $("#moulding_canvas").remove(); //remove the moulding canvas
      }

      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext("2d");
      if (fillet == "fillet")
      {
        canvas.id = "fillet_canvas_" + fillet_selected_matte + "_" + i; //create a fillet canvas for each element
        console.log(canvas.id);
      }
      else
      {
        canvas.id = "moulding_canvas";
      }
      canvas.style.position = "absolute";
      canvas.style.zIndex = 5;
      if (fillet == "fillet")
      {
        //Set the positioning of the fillets
        switch(fillet_selected_matte)
        {
          case "fillet_matte_layer_bottom": 
            fillet_bottom_left = parseInt($("#opening_" + i).css('left')) - img.width + "px"; 
            canvas.style.left = fillet_bottom_left;parseInt($("#opening_" + i).css('top')) - img.width + "px";

            fillet_bottom_top = parseInt($("#opening_" + i).css('top')) - img.width + "px"; 
            canvas.style.top = fillet_bottom_top;
            break;

          case "fillet_matte_layer_middle": 
            fillet_middle_left = parseInt($("#opening_" + i).css('left')) - img.width - 5 + "px";
            canvas.style.left = fillet_middle_left;

            fillet_middle_top = parseInt($("#opening_" + i).css('top')) - img.width - 5 + "px"; 
            canvas.style.top = fillet_middle_top;
            break;

          case "fillet_matte_layer_top": 
            if (mattes_default_selected == true)
            {
              fillet_top_left = parseInt($("#opening_" + i).css('left')) - img.width - 12 + "px"; 
              canvas.style.left = fillet_top_left;

              fillet_top_top = parseInt($("#opening_" + i).css('top')) - img.width - 12 + "px"; 
              canvas.style.top = fillet_top_top;
            }
            else
            {
              fillet_top_left = parseInt($("#opening_" + i).css('left')) - img.width + "px";
              canvas.style.left = fillet_top_left;

              fillet_top_top = parseInt($("#opening_" + i).css('top')) - img.width + "px";
              canvas.style.top = fillet_top_top;
            }
            break;
        }
      }
      else
      {
        canvas.style.left = "-" + img.width + "px";
        canvas.style.top = "-" + img.height + "px"; 
      } 

      canvas.height = parseInt($("#matte_canvas").height()) + (img.height * 2);
      canvas.width = parseInt($("#matte_canvas").width()) + (img.width * 2);

      moulding_draw_elements(ctx, img, i); //call the function to actually draw the moulding elements

      if (fillet == "fillet")
      {
        $(canvas).insertAfter("#opening_" + i); //insert the canvas after the specific opening
      }
      else
      {
        $("#mattes").append(canvas); //appending the canvas
      }
    });
  });
}

Answer 1

Just drop the indexing on $(el).find("fillet")[i]

JSFiddle: http://jsfiddle.net/TrueBlueAussie/BTHLZ

e.g. to get the only DOM element (or undefined)

$(el).find("fillet")[0]; 

You were accessing child elements based on the parent's index, but there is only one fillet in each mat (maximum). Note the question has been changed, so this answer may make less sense now :)