Create cookie interface with input fields? (multiple values) and from any domain?

Question

For testing purposes, I want to be able to create cookies as I need them.

The cookies I'm using are in this format: A0A60B1381:ASD887DSFFSDF:SD8F89SD7F89SD7 with any generic name.

I need to read the current values of the cookie if it exists(or create a cookie with that name), split the values into separate input fields, be able to edit those input fields, and write the cookie. (and probably destroy the current value of the cookie, if need be).

What would be the best way to approach this?

UPDATE:

Thanks to Abdullah, I have this code now - however, it isn't pulling in cookies from other domains. So I need it to pull in the cookie - "junk" from any domain, and write it across domains with a expiration date. How would I do that in this context?

 <script>
        $(document).ready(function() {

        var val = $.cookie('junk');
        var arr = val.split(':');
             $('#Cookie_input0').val(arr[0]); // set value of input element
            $('#Cookie_input1').val(arr[1]); // set value of input element
            $('#Cookie_input2').val(arr[2]); // set value of input element
            $('#Cookie_input3').val(arr[3]); // set value of input element
            $('#Cookie_input4').val(arr[4]); // set value of input element
            $('#Cookie_input5').val(arr[5]); // set value of input element
        $('#Submit').click(function() {
            //recreate arr from input elements
            var arr = [];
            $('input.cookieJr').each(function() {
                arr.push($(this).val());
            });
            // set cookie
            var val = arr.join(':');
            $.cookie('junk', val); // write the cookie back out
        });
        });

    </script>

And

<form name="cookieValues">
    <input id="Cookie_input0" class="cookieJr" type="text" />
    <input id="Cookie_input1" class="cookieJr" type="text" />
    <input id="Cookie_input2" class="cookieJr" type="text" />
    <input id="Cookie_input3" class="cookieJr" type="text" />
    <input id="Cookie_input4" class="cookieJr" type="text" />
    <input id="Cookie_input5" class="cookieJr" type="text" />
    <input type="submit" value="Submit" id="Submit"/>

</form>

Answer 1

Use jquery.cookie.js :

$.cookie('the_cookie'); // gets the cookie
$.cookie('the_cookie', 'A0A60B1381:ASD887DSFFSDF:SD8F89SD7F89SD7'); // sets the cookie

For example:

var val = $.cookie('the_cookie') || 'A0A60B1381:ASD887DSFFSDF:SD8F89SD7F89SD7';
var arr = val.split(':');
arr[0] = "NEW_VAL";
val = arr.join(':');
$.cookie('the_cookie', val); // write the cookie back out

Update

I think you're trying to edit the cookie on the fly, this should work:

// after reading cookie as described above, should be inside a $(document).ready()
$('#ID_OF_INPUT_ELEMENT').val(arr[0]); // set value of input element

// once input element has been set and some 'submit' button clicked
$('#ID_OF_SUBMIT_BUTTON').click(function() {
    //recreate arr from input elements
    var arr = [];
    $('input.some_class_they_all_share').each(function() {
        arr.push($(this).val());
    });
    // set cookie
    var val = arr.join(':');
    $.cookie('the_cookie', val); // write the cookie back out
});