I want to display the value and images in the textbox on click.
on clicking the value (Div) i want to display the images and the value together in the text box
<div class="input-group" id="dd">
<input id="materialTypeInput" type="text" class="form-control" name="materialTypeInput"
placeholder="Select material type" readonly="true" style="margin-left: 10px;
width: 100%;" />
<span class="input-group-addon" style="position: relative; width: 18%;" id="itemslist">
<a href="#" data-toggle="popover" title="Popover Header" data-content=".list" id="inputa">
<a href="#" class=""><i class="glyphicon glyphicon-chevron-left" style="margin-left: 12px;"
id="gicon"></i></a></span>
</div>
<div class="col-md-5">
<div class=" items-list itemhidden col-md-5" id="items" style="margin-bottom: 15px">
<div class="heading" value="na" style="color: black; text-align: center; padding-bottom: 11px;
font-size: 14px; border-bottom: solid 2px darkgrey; height: 32px;">
SELECT MATERIAL TYPE</div>
<div value="Packaged/Consumer boxes" id="packed" class="item col-md-3 ">
<img src="Images/package (2).png" class="imgcss"><p style="line-height: 1">
Packaged / Consumer boxes</p>
</div>
<div value="Food and agriculture" id="food" class="item col-md-3 ">
<img src="Images/plant.png" class="imgcss"><p style="line-height: 1">
<br />
Food and agriculture</p>
</div>
<div class="popupCloseButton">
X</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$("#itemslist").click(function () {
$("#items").removeClass("itemhidden");
$("#gicon").removeAttr("class");
$("#gicon").attr("class", "glyphicon glyphicon-chevron-right");
});
$(".item").click(function () {
$("#items").addClass("itemhidden");
var itemval = $(this).attr("value");
$("#materialTypeInput").attr('value', $(this).attr("value"));
});
</script>