在递增div时单击事件

Question

I've got 2 jquery scripts i've been working on, I now have to merge them together to make the final script.

Here's the first part which clones the form.

function updateClonedInput(index, element) {
    $(element).appendTo("#upload_image_sets").attr("id", "clonedInput" +  index);
    $(element).find(">:first-child").attr("id", "upload_image_link_" + index);
    $(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
    $(element).find(">:first-child").next().attr("id", "show_upload_image_link_button_" + index);
}

$(document).on("click", ".clone", function(e){
    e.preventDefault();
    var cloneIndex = $(".clonedInput").length + 1;
    var new_Input = $(this).parents(".clonedInput").clone();
    updateClonedInput(cloneIndex, new_Input);   
});
$(document).on("click", "button.remove", function(e){
e.preventDefault();
    if($('.clonedInput').length > 1) {
        $(this).parents(".clonedInput").remove();

        $(".clonedInput").each( function (cloneIndex, clonedElement) {
            updateClonedInput(cloneIndex + 1, clonedElement);
        })
    }

});

Here's the second part that allows me to upload an image.

// Media Upload Button 1
var custom_uploader;
$('#show_upload_image_link_button_1').click(function(e) {
    e.preventDefault();
    //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
     return;
    }
    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
    title: 'Choose Image',
    button: {
        text: 'Choose Image'
    },
     multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function() {
    attachment = custom_uploader.state().get('selection').first().toJSON();
    $('#upload_image_link_1').val(attachment.url);
    });
    //Open the uploader dialog
    custom_uploader.open();
});

This works for the first form, but as the form increments the div id changes.

It's the lines

$('#show_upload_image_link_button_1').click(function(e) {

and

$('#upload_image_link_1').val(attachment.url);

that need changing i.e. #show_upload_image_link_button_1 needs to be #show_upload_image_link_button_2, 3 and so on

I've done this once before and now I can't remember how I done it.

Here's the html/php part just incase

$hero_options = get_option( 'hero_options' ); 
$count=count($hero_options);
$totalimg=$count-4;
$html = '<div id="upload_image_sets">';
if( isset( $hero_options['upload_image_link_1'] ) && $hero_options[ 'upload_image_link_1' ] ) { 
for($i=1;$i<=$totalimg;$i++){ 
    $html .= '<div id="clonedInput'.$i.'" class="clonedInput">';
    $html .= '<input type="text" id="upload_image_link_'.$i.'" size="36" name="hero_options[upload_image_link_'.$i.']" value="' . $hero_options['upload_image_link_'.$i.''] . '" />';

    $html .= '<input id="show_upload_image_link_button_'.$i.'" class="button upload_images" type="button" value="Upload Image" />';

    $html .= '<div class="actions">
    <button class="clone">Clone</button> 
    <button class="remove">Remove</button>
</div>
</div>';
}}
$html .= '</div>';

    echo $html;

Answer 1

How about using a class and just Looping to the last element?