Como criar máscara de moedas para meus inputs? | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Caros,
Estou tentando criar máscara para meus valores do código abaixo, tanto com o plugin do JQuery Mask (que não acontece nenhum evento), com funções do JavaScript que também não deu certo, em alguns casos ou o valor sai concatenado em outros retorna NaN.
Alguém consegue me indicar alguma forma de criar máscaras?
<html>

<head>
    <title>Teste</title>


      <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
      <link rel="stylesheet" href="css/style.css">
      <link href="css/bootstrap.css" rel="stylesheet">
      <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" type="text/css" />

      <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
      <link href="open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/bootstrap.bundle.js" type="text/javascript"></script>
    <script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <!-- <script src="js/testajson.js" type="text/javascript"></script> -->


    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>


    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.2/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script>

    <script src="js/importaExcel.js"></script>


</head>
<body>

<script type="text/javascript">


function soma(){

    var grupo_TotalAC = form.TotalAC.value =  Number (form.caixaebancos.value)  +  Number (form.clientes.value);
}


$(document).ready(()=>{

  $('form input').each(function()
  {

  });

  $(".inputCalculo").blur(soma);

  $("#viewfile").click(()=>{
    ExportToTable();
    soma_ativcirculante();

  });
});

</script>

<form  name="form" method="post" action="">

    <h5>Formulário</h5>

        <div class="form-group row" style="padding-left:40; margin: 0px 0px 0px 0px; white-space: nowrap;">
            <label class="col-sm-2 col-form-label"; style="font-family: 'PT Sans Narrow', sans-serif;">Caixa</label>

                        <span class="input-group-text" style="background-color: #011627; color: #FDFFFC; font-family: 'PT Sans Narrow', sans-serif;">R$</span>
                        <input  name="caixaebancos" id="caixaebancos" class="inputCalculo" style="font-family: 'PT Sans Narrow', sans-serif;"> 
        </div>


        <div class="form-group row" style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; white-space: nowrap;">
            <label class="col-sm-2 col-form-label"; style="font-family: 'PT Sans Narrow', sans-serif;">Clientes</label>

                        <span class="input-group-text" style="background-color: #011627; color: #FDFFFC; font-family: 'PT Sans Narrow', sans-serif;">R$</span>
                        <input name="clientes" id="clientes" class="inputCalculo" style="font-family: 'PT Sans Narrow', sans-serif;">
        </div>

        <div class="form-group row" style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;white-space: nowrap;">
            <label class="col-sm-2 col-form-label"; style="font-family: 'PT Sans Narrow', sans-serif;"><b style="color: #011627">Total</b></label>
                        <span class="input-group-text" style="background-color: #011627; color: #FDFFFC; font-family: 'PT Sans Narrow', sans-serif;">R$</span>
                        <input name="TotalAC" style="background-color: #C5C5C5; font-family: 'PT Sans Narrow', sans-serif; font-weight: bold;" readonly><br>
        </div>
</form>
</body>
</html>
Mergulhe em programação
