How to select images inside a div with JS / jQuery

I have an array called “works” that contains 7 images.
They should be displayed in a grid which is defined like this:

<div class="container">
  <div class="row" id="g-work">
  </div><!-- / row -->
</div><!-- / container -->

Now in JS I am filling/replacing “works” with these images and then I want to turn the borders red. However I don’t really understand how to select them correctly. This is supposed to be the correct code but it doesnt seem to work. What is this $(“#g-work img) doing? There are no image tags in #g-work. What does it mean? And why can’t just write var images=works? If I try the code below, my developer tools even tell me that images is not defined. What is the problem here?

for(var i = 0; i < works.length; ++i ) {
    <div class='col-sm-6 col-md-3'>/
      <img class='img-responsive' src='" + works[i] + "'>/

  var images = $("#g-work img"); 
  $(images[i]).css("border", "2px red");

   let DIV=$("<div/>",{class:"col-sm-6 col-md-3"});
   let Image=$("<img/>",{class:"img-responsive",src:value,style:"border:solid 2px red;margin-bottom:5px"});
<link target="_blank" rel="nofollow" href="" rel="stylesheet"/>
<script src=""></script>
<div class="container">
  <div class="row" id="g-work">
  </div><!-- / row -->
</div><!-- / container -->

Ok fond the source of the problem, I believe but I don’t understand why its a problem. If choose “2px solid salmon” as border color, it works but if I take “2px red” or “2px ffffff”, it doesn’t.