Select dynamically-inserted HTML elements with Javascript

I am developing a kind of calculator, where the client puts some information listed in select elements and calculates the value of the service to be hired. In this calculator, there is the option to select the type of service to which the customer wants to calculate the prices, that is, the parameters "name" and "id" change according to the customer service selection. Below is the code

HTML

<section class="wrapper style1 align-center">
                    <div class="inner">
                        <h2>Calcule Preços de Planos</h2>
                        <p id="ccl">Simule valores para contratar avulso ou planos periódicos. </p>
                        <h3>Calculando para:</h3>
                        <div class="items style1 medium sem-borda no-padding-top">
                            <div class="field third">
                                <input type="radio" id="ph" name="setserv" value="ph" onClick="setCalc()" checked />
                                <label for="ph">Diarista Por Hora</label>
                            </div>
                            <div class="field third">
                                <input type="radio" id="po" name="setserv" value="po" onClick="setCalc()" />
                                <label for="po">Limpeza Pós Obra</label>
                            </div>
                        </div>
                            <div class="items style1 medium onscroll-fade-in calculadora">
                                <section id="calc-tit-desc">

                                </section>
                                <section id="calc-parametros">

                                </section>
                                <section class="calc-preco">
                                    <div class="preco">
                                        <h2 id="calc-preco" class=""></h2>
                                    </div>
                                    <ul class="actions">
                                        <li>
                                            <span class="button special">Quero Contratar!</span>
                                        </li>
                                    </ul>
                                </section>
                        </div>
    </div>

JAVASCRIPT

function setCalcPO() {

    ctd.innerHTML = calcTitDescPO;
    cpa.innerHTML = calcParametrosPO;
    calcPreco.innerHTML = "R$0,00";

}

function setCalcPH() {

    ctd.innerHTML = calcTitDescPH;
    cpa.innerHTML = calcParametrosPH;
    calcPreco.innerHTML = "R$0,00";

}

function setCalc() {


        if (isEasy()) {
            setCalcEasy();
        } else if (isPO()) {
            setCalcPO();
        } else if (isPH()) {
            setCalcPH();
        }   

}


$(document).ready(function() {

    setCalc();

});

The above functions insert an HTML block in the section # calc-tit-desc and # calc-parameters that are the texts that describe the service being calculated and the parameters (select elements) to be chosen by the client. The problem arises from the fact that after the insertion of the HTML content by javascript, the values of the select can not be accessed, since the error appears as "can not find a value of a null", that is, javascript can not find that select inserted after the page loads.

Code that is dynamically inserted

var calcTitDescPO = '<h3 id="calc-tit">Calculando Para Pós Obra</h3>'+
            '<p id="calc-desc">Calcule o valor do serviço de acordo com o tamanho do ambiente e do nível de contaminação por cimento, tinta, argamassa etc.</p>';

var calcParametrosPO = '<div class="select-wrapper">'+
                    '<select name="tamanho-obra" id="tamanho-obra" >'+
                        '<option value="1">- TAMANHO M² -</option>'+
                        '<option value="50">Até 50 m²</option>'+
                        '<option value="100">De 50 à 100 m²</option>'+
                        '<option value="150">De 100 à 150 m²</option>'+
                        '<option value="200">De 150 à 200 m²</option>'+
                        '<option value="maior200">Acima de 200</option>'+
                    '</select><br />'+
                '</div>'+
                '<div class="select-wrapper">'+
                    '<select name="contaminacao" id="contaminacao">'+
                        '<option value="1">- CONTAMINAÇÃO -</option>'+
                        '<option value="sem">Sem contaminação</option>'+
                        '<option value="baixo">Baixo</option>'+
                        '<option value="medio">Médio</option>'+
                        '<option value="alto">Alto</option>'+
                        '<option value="critico">Crítico</option>'+
                    '</select>'+
                '</div>'+
                '<ul class="actions margintop">'+
                    '<li>'+
                        '<span class="button" id="calc-botao" onclick="calcularObra()">Calcular</span>'+
                    '</li>'+
                '</ul>';

Selecting selector values

var obraTamanho = document.getElementById("tamanho-obra");
var contaminacao = document.getElementById("contaminacao");

function calculateObra () {

$(document).ready(function() {

    if(obraTamanho.value !== 0 && contaminacao.value === 0) {
        cpe.innerHTML = "Falta informar o nível de contaminação";
    } else if (obraTamanho.value === 0 && contaminacao.value !== 0) {
        cpe.innerHTML = "Falta informar o tamanho do local";
    }


});

}

And then using else if successively for the chosen data

Does anyone know how I can get around this?

Thank you in advance