I am using jQuery template with these code below:  

#######HTML part#####

<script id="imageTmpl" type="text/x-jquery-tmpl">

{{if selected == 1}}

<img src="images/${image}.png" />

{{/if}}

</script>

<script id="bulletTmpl" type="text/x-jquery-tmpl">

{{if selected == 1}}

<li class="selected"></li>

{{else}}

<li></li>

{{/if}}

</script>

#####jQuery part######

        //initializing variable

        var chosen = 0;

var lempah_kuning = 

[

    { name: "Lempah Kuning Kepala Ikan", image: "kepala-ikan", selected: 1},

    { name: "Lempah Kuning Ayam", image: "lempah-kuning-ayam-mangga", selected: 0},

      { name: "Lempah Kuning Iga", image: "lempah-kuning-iga-mangga", selected: 0},

      { name: "Lempah Kuning Ceker", image: "lempah-kuning-ceker-mangga", selected: 0},

      { name: "Lempah Kuning Udang", image: "lempah-kuning-nanas-udang", selected: 0},

    { name: "Lempah Kuning Cumi", image: "lempah-kuning-nanas-cumi", selected: 0}

];

      // this is how I attach template and data to a div

      $('#bulletTmpl').tmpl(lempah_kuning).appendTo('ul#bullet');

      $('ul#bullet li').click(handleMouse);

      //problem is right here....

function handleMouse(e) 

{

lempah_kuning[chosen].selected = 0;

chosen = $("li").index(this);

lempah_kuning[chosen].selected = 1;

how do I update jQuery template of imageTmpl based on the bullet I click? I mean reload the imageTmpl?

$("li.selected").removeClass("selected");

$("li").eq(chosen).addClass("selected");

    }

I mean I have update selected of the data but how to update viewing the image because I use different template...