How to generate required HTML format using JQuery

Merged with How to make string as an Array Object in JQuery.

I am having below HTML in my page:

<div id="RotationImages" style="display:none">
    <input id="FirstImage" type="hidden" src="/english/images/spa.jpg" title="Enjoy a refreshing shower at 43,000 feet" alt="Enjoy a refreshing shower at 43,000 feet" height="326" width="980" header="Enjoy a refreshing shower at 43,000 feet" subheader="One of many groundbreaking amenities on the Flight" color="" href="1"/>

    <input id="SecondImage" type="hidden" src="/english/images/lounge.jpg" title="Socialize, relax, and indulge" alt="Socialize, relax, and indulge" height="326" width="980" header="Socialize, relax, and indulge" subheader="First and Business Class onboard lounges" color="" href="2"/>

    <input id="ThirdImage" type="hidden" src="/english/images/flatbeds.jpg" title="Arrive at your destination rested and relaxed" alt="Arrive at your destination rested and relaxed" height="326" width="980" header="Arrive rested and relaxed" subheader="Enjoy lie-flat comfort on our most modern aircraft" color="" href="3"/>
</div>

I am trying to generate below HTML forma开发者_开发百科t using JQuery, but struggling to get it.

   {"img_src":"/english/images/spa.jpg",
    "img_title":"Enjoy a refreshing shower at 43,000 feet",
    "img_alt":"Enjoy a refreshing shower at 43,000 feet",
    "img_height":"326",
    "img_width":"980",
    "header":"Enjoy a refreshing shower at 43,000 feet",
    "subheader":"One of many groundbreaking amenities on the Flight",
    "bg_color":"",
    "url_href":"1"},

Below is the JQuery:

$('.slideshow').liveBanner([
        var rotationImagelength = $('#RotationImages input[type=hidden]').length;

        $('#RotationImages input[type=hidden]').each(function(index,element)
        {            
            thisVal = $(this).val();
            var $this = $(this); 
            var LastImageDetail;  
            var ImageDetail;        
            if(index != rotationImagelength - 1) 
            {                    
                ImageDetail = '{"img_src":"'+ $(element).attr("src")+'", "img_title":"'+ $(element).attr("title")+'","img_alt":"'+ $(element).attr("alt")+'", "img_height":"'+ $(element).attr("height")+'","img_width":"'+ $(element).attr("width")+'","header":"'+ $(element).attr("header")+'","subheader":"'+ $(element).attr("subheader")+'","bg_color":"'+ $(element).attr("color")+'","url_href":"'+ $(element).attr("href")+'"},';                                                  
            }    
            else
            {
                ImageDetail = '{"img_src":"'+ $(element).attr("src")+'", "img_title":"'+ $(element).attr("title")+'","img_alt":"'+ $(element).attr("alt")+'", "img_height":"'+ $(element).attr("height")+'","img_width":"'+ $(element).attr("width")+'","header":"'+ $(element).attr("header")+'","subheader":"'+ $(element).attr("subheader")+'","bg_color":"'+ $(element).attr("color")+'","url_href":"'+ $(element).attr("href")+'"}';                                                  
            }                
            var fromPageInput = $("<input>").attr("type", "hidden").attr("name", "fromPage").val(ImageDetail); 
            $("#RotationImages").append($(fromPageInput)); 

        })

],{"autostart":false,
        "pause_time":5500,
        "random":false});

In above JQuery code, I am able to get all the values which are required, just little confused to add all in bunch, now it is appending every image details in my div, however I want all in one, please what tweaks I need to do in my code to get all image details in one input