Clone() the first class in jquery

Question

$('.addPack').click(function(){
            $('.immediate-whiskypack-inputs').clone().appendTo('#whiskypacks').show();
            return false;
       });

I have some form inputs in a div.immediate-whiskypack-inputs, I want to clone this and append it to div#whiskypacks. The above function clones each div class, is there a way of cloning just one of the div's?

Answer 1

Simply modify your selector so that it returns the single element that you want to clone. If you're interested in the first match, then use:

$('.immediate-whiskypack-inputs:first')

rather than

$('.immediate-whiskypack-inputs')

Answer 2

The above function clones each div class, is there a way of cloning just one of the div's?

Use eq^Docs:

$('.immediate-whiskypack-inputs').eq(0).clone().appendTo('#whiskypacks').show();

The eq needs index of element starting from 0. So if you want to append first one, use 0, second, use 1, third, use 2 and so on.

If you want to clone first or last, use :first and :last filter selectors:

// clone first
$('.immediate-whiskypack-inputs:first').clone().appendTo('#whiskypacks').show();
$('.immediate-whiskypack-inputs').eq(0).clone().appendTo('#whiskypacks').show();
// clone last
$('.immediate-whiskypack-inputs:last').clone().appendTo('#whiskypacks').show();