I'm basing my code off of this [solution by Ben Nadel](http://www.bennadel.com/blog/1591-ask-ben-print-part-of-a-web-page-with-jquery.htm)

Here is the code included in the page

```
<script type="text/javascript">
    // When the document is ready, initialize the link so
    // that when it is clicked, the printable area of the
    // page will print.
    $(function() {
        // Hook up the print link.
        $("a").attr("href", "javascript:void(0)").click(function() {
            // Print the DIV.
            $( ".printable" ).print();

            // Cancel click event.
            return(false);
        });
    });
</script>

```

[Here is a codepen](http://codepen.io/MARS/pen/hAFgn?editors=101)

The Buttons are not working in the pen but do work locally. 

What i'm trying to do is have the user print the contents of each list item which as you can tell is a Q&A so essentially have the user be able to print each Q&A pair when they click the button.

I've only included two to provide the minimal example to help me figure out where my error is.

What's happening is that no matter which button I click it will always print the first "li" with the class of "printable" and i'm not sure how to distinguish each section so that the button understands to only print 'this' and not the first li that has that class which is what it's doing. 

Obviously this is a problem since each Answer will have a "click to print" button and I don't want them to all print the same Q&A pair.

Does this make sense?

My instinct is to have some kind of loop in play or iterate through an array, but i'm very new to JavaScript so i'm looking for a moderately challenging solution.