JQuery getting dynamic values and populate hidden form fields

You have multiple elements sharing the same ID - which is wrong and can cause you lots of problems.

One of the problems is exactly the one you're facing now.

As you don't have a unique ID for the elements, the code will consider just the first match (in your case, the "Yellow" ones)

To fix this? Let's leave as much as possible with jQuery, to make it simple. Also, let's fix a bit the HTML markup. Please refer to the comments.

HTML

<!-- Removed all the input ids, because they were duplicated and useless. If you really need them for something else, make them unique. -->

<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="02_Digital_Revolution_Yellow" target="Yellow" title="digital-world" class="lightbox-image inline">
            <img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/212.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Yellow" />
    <input type="hidden" name="Product_Dir_1" value="digital-world" />
    <input type="hidden" name="Product_Name_1" value="Digital Revolution" />
</div>

<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="06_Abstract_Panel_Blue" target="Blue" title="abstract" class="lightbox-image inline">
            <img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/349.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Blue" />
    <input type="hidden" name="Product_Dir_1" value="abstract" />
    <input type="hidden" name="Product_Name_1" value="Abstract Panel" />
</div>

<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="10_Abstract_Discs_Red" target="Red" title="abstract" class="lightbox-image inline">
            <img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/353.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Red" />
    <input type="hidden" name="Product_Dir_1" value="abstract" />
    <input type="hidden" name="Product_Name_1" value="Abstract Disks" />
</div>

<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="electric-purple-grid" target="Purple" title="electric-effect" class="lightbox-image inline">
            <img src="/videos/electric-effect/Purple/electric-purple-grid.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/129.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Purple" />
    <input type="hidden" name="Product_Dir_1" value="electric-effect" />
    <input type="hidden" name="Product_Name_1" value="Electric Grid" />
</div>

<div style="display:none">
    <div id="container">
        <div id="video"></div>
        <div id="doesit">
            <form name="myform" action="/thisurl.asp" method="post">
                <input type="hidden" id="Product_color_16" name="Product_color_16" value="" />
                <input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="" />
                <input type="hidden" id="Product_Name_16" name="Product_Name_16" value="" />

                <!-- You can just ommit the onclick here. It's gonna work automatically, because it's a submit type. -->

                <button class="addtobutton addtocart" type="submit"></button>
            </form>
        </div>
    </div>
</div>

jQuery (Javascript):

// Add this bit to your page header, straight into the HTML markup (wrapped
// into script tags) or save into a separate JS file. Up to you.

var setFormValues = function(div) {

    // Getting the inputs values. The ones within the clicked div.
    // We look for the inputs which name starts with Product_...
    // Let's use .prop() instead of .val() because IE sometimes doesn's like it.

    var div = $(div);
    var productVid = $("input[name^='Product_Vid_']", div).prop("value");
    var productDir = $("input[name^='Product_Dir_']", div).prop("value");
    var productName = $("input[name^='Product_Name_']", div).prop("value");

    // Setting the form inputs values.

    $("#Product_color_16").prop("value", productVid);
    $("#Product_Dir_16").prop("value", productDir);
    $("#Product_Name_16").prop("value", productName);     
}

$(function () {

    // When the user clicks on one of the divs.

    $(".doneit").on("click", function () {
        setFormValues($(this));    

        return true;        
    });   

    // When the user clicks the cart button, on the video window.

    $(".addtocart").on("click", function() {

        // Here we need a bit of native Javascript.

        var videoPlaying = document.getElementById("video_video");

        if (typeof videoPlaying != "undefined") {
           var videoSource = videoPlaying.currentSrc;

           if (typeof videoSource != "undefined") {

               var videoSourceFilename = videoSource.split("com/")[1].split(".")[0];

               // Check which div has an image which src 
               // matches the video filename.

               var image = $(document).find("img[src*='" + videoSourceFilename + "']");

               if (typeof image != "undefined") {
                   var divContainer = $(image).parent().parent().parent();

                   if (typeof divContainer != "undefined")
                       setFormValues($(divContainer));
               }
           }
        }

        return true;
    });     
});