Selecting multiple images with JS/jquery

I am using Gridster for webpage.The widgets have images on it.These images can be added and deleted with + and X button.

Current State

When I press + a modal opens in which user can multiple images and on clicking Add Image those images get added on widgets.This part works fine.

When an image is clicked class = "preset" is added to the div in which the image is present.This class highlights the selected image.

When user again clicks the same image the class is removed from that image.

I also have added a removeclass function(which removes the class from all div's in which images are there) which is invoked when Add Image is clicked or modal is closed with close button or a X button on top right of modal

The problem

The code behaves in expected way when I add images for first time.

When I add images for second time(in the same widget or any other widget) the images are not getting highlighted/selected at all but if I click Add Image button previous images get added to a widget.

When I just close it from second time and again click the + button to add images for third time the output is as expected(images get highlighted, same images get added on the widget etc)

To summarize it the code works fine for 1, 3, 5 ..... time but weird on 2, 4, 6 ...... time

Also when I see the output

 console.log("In remove");
 console.log(selectedImageSRC);

and

console.log("In add");
 console.log(selectedImageSRC);

I found it expected when I am running the code for 1, 3, 5 ..... time.

But it is weird for 2, 4, 5 time.

Wierdness which I found in the console

if and else both of them is executed which is a part of function one below

My Function 1

    //Adding Images from Modal
    var parentLI;
    var selectedImageSRC = "";

   $(document).on("click", ".addmorebrands", function() {
        parentLI = $(this).closest('li');
        $('#exampleModalCenter').modal('show');
        $('#exampleModalCenter img').click(function(){
        parentdiv = $(this).closest('div.outerdiv');
        if (parentdiv.hasClass('preselect')) {                     //this if is executed in 2, 4, 5 time of code 

            parentdiv.removeClass('preselect');
            selectedImageSRC = selectedImageSRC.replace($(this).attr('src'),"");
            selectedImageSRC = trimChar(selectedImageSRC, ',');
            selectedImageSRC = (selectedImageSRC.replace(/,,/g , ","));
            console.log("In remove");
            console.log(selectedImageSRC);
            console.log("Parent Div in remove");
            console.log(parentdiv);
        }else {    //at same time (2, 4, 6 time of code execution) this else also get executed

            parentdiv.addClass('preselect');

            if (selectedImageSRC === '') {

                selectedImageSRC += $(this).attr('src');

            } else {

                selectedImageSRC += ',' + $(this).attr('src');
            }

            console.log("In add");
            console.log(selectedImageSRC);
            console.log("Parent Div in Add");
            console.log(parentdiv);
        }     


        })    



    }); 

My function 2

 $('#add-image').click(function(){

        console.log("In add image");
        console.log(selectedImageSRC);
        var multipleImageSRC = "";
        multipleImageSRC = selectedImageSRC.split(',');
        console.log("Splitted Images");
        console.log(multipleImageSRC);
        var multipleImages = "";
        for(var j = 0; j < multipleImageSRC.length; j++) {
            {% load static %}
            multipleImages += '<div class="imagewrap"><img class="images" src="'+multipleImageSRC[j]+'" title="Manual Addition"> <input type="button" class="removediv" value="X" /></div>'
            console.log("Multiple Images SRC");
            console.log(multipleImages);
        }


        parentLI.append(multipleImages);



        var imageNameValue = parentLI.children('.imagenames').val();
        var imageTitleValue = parentLI.children('.hoverinformation').val();

        //Loop for Updating Textarea with ImageNames
        var imageNameInTextarea = "";
        for (var j = 0; j < multipleImageSRC.length; j++) {

            imageNameInTextarea += multipleImageSRC[j].replace("/static/images/brands/","") + ",";

        }

        //To remove last ',' after the names
        imageNameInTextarea = trimChar(imageNameInTextarea, ',');
        console.log(imageNameInTextarea);

        //Loop calculating lenght of number of images added and correspondingly putting "Manual Addition"

        manualAddition = "";

        for (var j = 0; j < multipleImageSRC.length; j++) {

            manualAddition += "Manual Addition" + ",";

        }

        //To remove last ',' after the names
        manualAddition = trimChar(manualAddition, ',');

        console.log("Manual Textarea");
        console.log(manualAddition);

        if (imageNameValue === '') {
            parentLI.children('.imagenames').val(imageNameInTextarea);
        } else {
            parentLI.children('.imagenames').val(imageNameValue + ',' + imageNameInTextarea);
        }


        if (imageTitleValue === '') {
            parentLI.children('.hoverinformation').val(manualAddition);
        } else {
            parentLI.children('.hoverinformation').val(imageTitleValue + ',' + manualAddition);
        }


        $('#exampleModalCenter').modal('hide');
        removeclasses()



    });

Function removeclass

function removeclasses() {
       //Removing preselect class from all the div's when close button or add brand button is clicked.

       a = $('div .outerdiv').removeClass('preselect');
       selectedImageSRC = "";
       console.log(a);

    }

Fiddle

I know this is a very long post.Sorry for that but I have tried to explain each and every thing which I encountered.