JSFiddle - React, Tailwind, and code Playground

HTML

1A <input type="text" class="field" id="field1A" />
<br> 1B <input type="text" class="field" id="field1B" />
<br> 2A <input type="text" class="field" id="field2A" />
<br> 2B <input type="text" class="field" id="field2B" />
<br> 3A <input type="text" class="field" id="field3A" />
<br> 3B <input type="text" class="field" id="field3B" />


<div id="bg"></div>
<div id="modal">
  <div>Select an animal !</div>
  <br><br>
  <div>
    <img src="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br>
    <span class="descr">cat</span>
  </div>
  <div>
    <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br>
    <span class="descr">dog</span>
  </div>
  <div>
    <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br>
    <span class="descr">cow</span>
  </div>
</div>

<div id="bgB"></div>
<div id="modalB">
  <div>Select an animal !</div>
  <br><br>
  <div>
    <img src="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br>
    <span class="descr">cat</span>
  </div>
  <div>
    <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br>
    <span class="descr">dog</span>
  </div>
  <div>
    <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br>
    <span class="descr">cow</span>
  </div>
</div>

CSS

.field {
  margin: 10px;
}

#bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  display: none;
}

#modal {
  position: absolute;
  height: 300px;
  width: 600px;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -300px;
  background: #fff;
  display: none;
}

#modal div {
  display: inline-block;
}

#modal img {
  height;
  180px;
  width: 180px;
  opacity: 0.8;
  cursor: pointer;
}

#modal img:hover {
  opacity: 1;
}

#bgB {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  display: none;
}

#modalB {
  position: absolute;
  height: 300px;
  width: 600px;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -300px;
  background: #fff;
  display: none;
}

#modalB div {
  display: inline-block;
}

#modalB img {
  height;
  180px;
  width: 180px;
  opacity: 0.8;
  cursor: pointer;
}

#modalB img:hover {
  opacity: 1;
}

.descr {
  position: relative;
  width: 180px;
  padding: 0 0 0 70px;
}

JavaScript

var inputAId = "";
$("input[id^='field'][id$='A']").on('click', function() {
  inputAId = this.id;
  $("#bg").fadeIn(400, function() {
    $("#modal").fadeIn(400);
  });
});

$("#modal img").on('click', function() {
  var text = $(this).siblings('.descr').text();
  $("#modal").fadeOut(400, function() {
    $("#bg").fadeOut(400, function() {
      $("#" + inputAId).val(text);
    });
  });
});

$("input[id^='field'][id$='B']").on('click', function() {
  $("#bgB").fadeIn(400, function() {
    $("#modalB").fadeIn(400);
  });
});

$("#modalB img").on('click', function() {
  var text = $(this).siblings('.descr').text();
  $("#modalB").fadeOut(400, function() {
    $("#bgB").fadeOut(400, function() {
      $("input[id^='field'][id$='B']").val(text);
    });
  });
});