Get input attribute using jquery

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span class="btn btn-success btn-sm btn-file">Choose image
  <input id="first" value="{'id': '55e3385361c84c81c98087907e3f424ff4db6dac412cdcadf40090c04c25',
                'filename': 'firstlogo.png', 
                'content_type':'image/png',
                'size':43393}" 
         data-reference="d105c8c6fd72880c844dc61cb52b0639" 
         type="hidden" 
         name="product[product_image]">
  <input presigned="true" 
         direct="true" 
         class="choose-product-file" 
         data-direct="true" 
         data-as="file" 
         data-url="/attachments/cache/presign" 
         data-presigned="true" 
         data-reference="d105c8c6fd72880c844dc61cb52b0639" 
         accept=".png,.jpg,.jpeg" 
         type="file" 
         id="product_product_image">
</span>

JavaScript

$(document).ready(function() {
  this_var = $('input#first').val();
  json = JSON.stringify(eval("(" + this_var + ")"));
  json = JSON.parse(json);
  console.log(json);
  console.log(json["id"]);
  console.log(json["filename"]);
});