Combining a class selector and an attribute selector with jQuery

 https://stackoverflow.com/questions/6246683/combining-a-class-selector-and-an-attribute-selector-with-jquery

Combine them. Literally combine them; attach them together without any punctuation.

$('.myclass[reference="12345"]')

Your first selector looks for elements with the attribute value, contained in elements with the class.
The space is being interpreted as the descendant selector.

Your second selector, like you said, looks for elements with either the attribute value, or the class, or both.
The comma is being interpreted as the multiple selector operator — whatever that means (CSS selectors don't have a notion of "operators"; the comma is probably more accurately known as a delimiter).

This code works too:

$("input[reference=12345].myclass").css('border', '#000 solid 1px');

jQuery - Create hidden form element on the fly

Source: https://stackoverflow.com/questions/2408043/jquery-create-hidden-form-element-on-the-fly

$('<input>').attr('type','hidden').appendTo('form');

To answer your second question:

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar'
}).appendTo('form');

The same as David's, but without attr()

$('<input>', {
    type: 'hidden',
    id: 'foo',
    name: 'foo',
    value: 'bar'
}).appendTo('form');