title: Jquery multiply input number value and Json data
body: <p>I have a time calculation tool which you can find in the following fiddle link. Once someone has selected a platform, task type, component and number of units, the number of units entered should be multiplied with selected component value and show it on the below table. I have managed to get the all populated values but can't do the math. I have tried several attempts but it wasn't working.</p>
  
  <pre><code>var myJson = {
  "platforms": [
      {
          "name": "Sitecore",
          "id": "sitecore",
          "tasktype": [
              {
                  "name": "Promobox",
                  "id": "promobox",
                  "components": [
                      {
                          "name": "Accordion",
                          "id": "accordion",
                          "time": "20"
                      },
                      {
                          "name": "Box 1",
                          "id": "box1",
                          "time": "30"
                      }
                  ]
              },
              {
                  "name": "Video",
                  "id": "video",
                  "components": [
                      {
                          "name": "Box 2",
                          "id": "box2",
                          "time": "25"
                      },
                      {
                          "name": "Box 3",
                          "id": "box3",
                          "time": "30"
                      }
                  ]
              }
          ]
      },
      {
          "name": "Siab",
          "id": "siab",
          "tasktype": [
              {
                  "name": "Newswire",
                  "id": "newswire",
                  "components": [
                      {
                          "name": "Box 4",
                          "id": "box5",
                          "time": "50"
                      },
                      {
                          "name": "Box 5",
                          "id": "box5",
                          "time": "40"
                      }
                  ]
              },
              {
                  "name": "Task Type New",
                  "id": "tasktypenew",
                  "components": [
                      {
                          "name": "Box 6",
                          "id": "box6",
                          "time": "20"
                      },
                      {
                          "name": "Box 7",
                          "id": "box7",
                          "time": "100"
                      }
                  ]
              }
          ]
      }
  ]
  };
  
  
  
  $.each(myJson.platforms, function (index, value) {
  var platform_id;
  var tasktype_id;
  var component_id;
  
  $("#platform").append('&lt;option rel="' + index + '" value="' + value.id + '"&gt;'     + value.name + '&lt;/option&gt;');
  
  $("#platform").change(function () {
      $("#tasktype, #component").find("option:gt(0)").remove();
      $("#tasktype").find("option:first").text("Loading...");
  
      platform_id = $(this).find('option:selected').attr('rel');
  
      $.each(myJson.platforms[platform_id].tasktype, function (index1, value1) {
          $("#tasktype").find("option:first").text("Select Task Type");
          $("#tasktype").append('&lt;option rel="' + index1 + '" value="' +     value1.id + '"&gt;' + value1.name + '&lt;/option&gt;');
      });
  
  });
  
  
  $("#tasktype").change(function () {
      $("#component").find("option:gt(0)").remove();
      $("#component").find("option:first").text("Loading...");
  
      tasktype_id = $(this).find('option:selected').attr('rel');
  
      $.each(myJson.platforms[platform_id].tasktype[tasktype_id].components,     function (index2, value2) {
          $("#component").find("option:first").text("Select Component");
          $("#component").append('&lt;option rel="' + index2 + '" value="' +      value2.time + '"&gt;' + value2.name + '&lt;/option&gt;');
      });
  
  
  });
  
  
  });
  
  
  $(document).ready(function () {
      $('#calculate').click(function () {
      $('#calc input, #calc select').each(
          function (index) {
          var input = $(this);
          $('#data tbody').append('&lt;tr&gt;&lt;td&gt;' + input.val() + '&lt;/td&gt;&lt;/tr&gt;');
          });
      });
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/x4rLuf88/" rel="nofollow noreferrer">JS Fiddle</a></p>