get input value through its parent div id

Question

I have the following markup:

(function( $ ) {
	'use strict';

	function format_number_two_decimal(number) {
		return parseFloat(Math.round(number * 100) / 100).toFixed(2);
	}

	function calculartotal(){
		var importe_neto = document.getElementById("acf-field_58c13e2ed4e42").value;
		var importe_total = importe_neto * 1.21;
		importe_total = format_number_two_decimal( importe_total) ;

		$("input#acf-field_58c142a090f58").val( importe_total );
		$("input#acf-field_58c13e2ed4e42").val( format_number_two_decimal( importe_neto ) );

    //debug purposes
		console.log( importe_neto );
	};

	$(document).on('change', 'input#acf-field_58c13e2ed4e42', function () {
		calculartotal();
	});	

    /**
     * on page load
     */
    $(function(){
        calculartotal();
    });

})( jQuery );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="fac_importe_neto" class="acf-field acf-field-number acf-field-58c13e2ed4e42" data-name="fac_importe_neto" data-type="number" data-key="field_58c13e2ed4e42">
	<div class="acf-label">
		<label for="acf-field_58c13e2ed4e42">Importe neto</label>
	</div>
	<div class="acf-input">
		<div class="acf-input-wrap"><input type="number" id="acf-field_58c13e2ed4e42" class="acf-is-appended" min="" max="" step="any" name="acf[field_58c13e2ed4e42]" value="" placeholder=""></div>
  </div>
</div>

<div id="fac_importe_total" class="acf-field acf-field-number acf-field-58c142a090f58" data-name="fac_importe_total" data-type="number" data-key="field_58c142a090f58">
	<div class="acf-label">
		<label for="acf-field_58c142a090f58">Importe total</label>
	</div>
	<div class="acf-input">
		<div class="acf-input-wrap"><input type="number" id="acf-field_58c142a090f58" class="acf-is-appended" min="" max="" step="any" name="acf[field_58c142a090f58]" value="" placeholder=""></div>
  </div>
</div>

It works like a charm, but I want to completely remove in the whole script the references to the number id that my framework automatically generates (i.e. acf-field_58c142a090f58) and use instead the more semantic ids (written by me).

NOTE: The framework don't allows me to put semantic ids in the input fields, so...

I was trying to use the parent div id, which name actually I can control, i.e. "fac_importe_neto" as follows:

var importe_neto = $("#fac_importe_neto").find("input").value;

With no success... What I'm missing?

Answer 1

Try keep using jquery with val():

var importe_neto = $("#fac_importe_neto").find("input").val();