title: How to get the value from the return function and send it to the html element
body: <p>I have been working on a code to save the coordinates of bounding box over the image. I was able to retrieve the coordinates from the bounding box. But what I like to do is place them individually under each HTML element.</p>
  <p>The image below shows the coordinates collected from the bounding box:</p>
  <p><a href="https://i.stack.imgur.com/sM3an.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sM3an.png" alt="enter image description here" /></a></p>
  <p>In the above image the coordinates are in a single line. But i would like to get those values individually.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;actions&quot;&gt;
  
            &lt;input type=&quot;button&quot; id=&quot;btnView&quot; value=&quot;Display areas&quot; class=&quot;actionOn&quot; /&gt;
            &lt;input type=&quot;button&quot; id=&quot;btnReset&quot; value=&quot;Reset&quot; class=&quot;actionOn&quot; /&gt;
            &lt;input type=&quot;button&quot; id=&quot;btn_add&quot; value=&quot;add areas&quot; class=&quot;actionOn&quot; /&gt;
   &lt;/div&gt;
    &lt;br&gt;
   &lt;div id=&quot;output&quot; class='output'&gt; &lt;/div&gt;
   &lt;input type= &quot;hidden&quot; id=&quot;x&quot; name =&quot;x&quot; value=&quot;-&quot;&gt;
   &lt;input type= &quot;hidden&quot; id=&quot;y&quot; name =&quot;y&quot; value=&quot;-&quot;&gt;
   &lt;input type= &quot;hidden&quot; id=&quot;w&quot; name =&quot;w&quot; value=&quot;-&quot;&gt;
   &lt;input type= &quot;hidden&quot; id=&quot;h&quot; name =&quot;h&quot; value=&quot;-&quot;&gt;
  </code></pre>
  <p>Javascript:</p>
  <pre><code>  var selectionExists;
  
    function areaToString (area) {
      return (typeof area.id === &quot;undefined&quot; ? &quot;&quot; : (area.id + &quot;: &quot;)) + area.x + ':' + area.y  + ' ' + area.width + 'x' + area.height + '&lt;br /&gt;'
    }
  
  
  
    function output (text) {
      $('#output').html(text);
    }
  
    // Log the quantity of selections
    function debugQtyAreas (event, id, areas) {
      console.log(areas.length + &quot; areas&quot;, arguments);
    };
  
    // Display areas coordinates in a div
    function displayAreas (areas) {
      var text = &quot;&quot;;
      $.each(areas, function (id, area) {
        text += areaToString(area);
      });
      output(text);
    };
  </code></pre>
  <p>From the above codes, the function DisplayAreas is used to display the coordinates of the bounding boxes in a single line using 'area.x', 'area.y', 'area.w' and 'area.h', but i would like to save each of the coordinated under each html elements like x, y , w and h.</p>
  <p>i.e., from the image, when i press display areas button, the coordinates must be sent to the html elements x,y,w and h. and display as</p>
  <p>X:
  Y:
  W:
  H:</p>
  <p>Can someone help me to solve this problem.</p>