How do I return my image to a specific div?

Question

I'm making a site where you can build a burger using images in the site. The images are stored in separate divs and are assigned a category. When you click on the image it adds it to a fourth div at the end. When you click on the images they're supposed to go back to the divs they originated from. It's supposed to rely on the data-category attribute in the images. Here is one of the divs:

    <div id = "basics" class = "category">
        <h2>Basics</h2>
        <img src="bottom-bun.png" data-category = "#basics">
        <img src="patty.png" data-category = "#basics">
        <img src="top-bun.png" data-category = "#basics">
    </div>

And here is the JavaScript:

$(function (){
    $("#basics").children().on("click", function (){
        $("#order").append(this);
    })
})
$(function (){
    $("#extras").children().on("click", function (){
        $("#order").append(this);
    })
})
$(function (){
    $("#condiments").children().on("click", function (){
        $("#order").append(this);
    })
})
$(function (){
    $("#order").children().on("click", function (){
        $(this.data("data-category")).append(this);
    })
})

Any help is appreciated.

Answer 1

I just had to remove the .children() after the order and add an img after the click.

Answer 2

Bind click event to parent element (#order)

$(function (){
    $("#order").on("click", function ({target}){
        console.log(($(target).data("category")))
        if($(target).data("category")){
          $($(target).data("category")).append($(target));
        }            
    })
})