jQuery multiple click events for populating the description assigned to a div/img in another div AND opening a thumbnail larger in two stages
<p>On a single page, I require multiple <code>onClick</code> events. I've read that they will cancel out, so handling these events would by my biggest issue, but I'd appreciate help with the individual scripts described below.</p>

<p>I found a discussion on here with an example that I was able to modify for one of the .click() scripts. This script works in a form where CSS is changed onclick, 'highlighting' a certain div as an option in a group. I have two of these groups, with the other one switching to an image (check-mark) to specify that it has been selected and a data-value sent to the form. This appears to be working fine. You can see a clip of the page here: <a href="http://jsfiddle.net/6Fj3P/" rel="nofollow">http://jsfiddle.net/6Fj3P/</a></p>

<p>And this is the JS:</p>

<pre><code>$(document).ready(function () {
    $('#select-form div.p-sz').click(function () {
        // Set the form value
        $('#image-value1').val($(this).attr('data-value'));

        // Unhighlight all the images
        $('#select-form div.p-sz').removeClass('highlighted_p-sz');

        // Highlight the newly selected image
        $(this).addClass('highlighted_p-sz');
    });
});


$(document).ready(function () {
    $('#select-form div.p-c').click(function () {
        // Set the form value
        $('#image-value2').val($(this).attr('data-value'));

        // Unhighlight all the images
        $('#select-form div.p-c').removeClass('highlighted_p-c');

        // Highlight the newly selected image
        $(this).addClass('highlighted_p-c');
    });
});
</code></pre>

<p>Now, I also need each of these groups to display a text description in an h6/span below the group. I saw <a href="http://stackoverflow.com/questions/11188841/click-on-image-and-change-a-text">this post</a>, in which I tried to modify Okeke's answer, but it didn't work within a span (as it is used with a text input in the example).</p>

<p>I kept the class <strong>has-message</strong> and <strong>data-msg</strong> as the description holder:</p>

<pre><code>&lt;img src="images/spc.png" alt="Lagoon Blue" data-value="lagoon-blue" 
class="has-message" data-msg="LAGOON BLUE" /&gt;
</code></pre>

<p>I want the data-msg to appear here:</p>

<pre><code>&lt;div&gt;
    &lt;h6&gt;
         &lt;span&gt;NAME OF SELECTED ITEM POPULATES HERE&lt;/span&gt;
    &lt;/h6&gt;
&lt;/div&gt;
</code></pre>

<p>The other jQuery multi-events are in a separate section of the page where thumbnails can be clicked to open a larger version of the image in a div, and then the active image in that div can be clicked to open full-sized in a new window or modal (don't know which yet).</p>

<p>I've found snippets of code to handle many of these things individually, but tying them all together (and cleanly) is the most difficult, and I've spent more than a week trying to figure this out on my own. I come to you for help. This is a learning process for me, but I also need to get this working quickly.</p>
