How to avoid conflicts in JQuery?

I have a system where user registration is done through steps:

Butwhentheusertypesthename,I'mwantingthat,asithappenshereonthesite,thenameautomaticallyappearsinadivnexttotheform.ForthisIdidthis:

<script>varnome=document.querySelector('#nome');varparagrafoNome=document.querySelector('#paragrafonome');nome.addEventListener('keyup',function(){paragrafoNome.innerHTML="<div align='left' style='padding: 10px'><strong>Nome:</strong> <br>" + nome.value + "</div>";
  });
  </script>

<input id="nome" name="nome" type="text" class="md-form-control required">

<p id="paragrafonome"></p>

But I noticed that this code is conflicting with the jquery of the steps, because when I remove this line:

<script src="assets/plugins/forms-wizard-validation/js/jquery.steps.js"></script>

It works normally, but when I leave this line, the autocompletion stops working. I tried to put $.noConflict(); before the script, but it made the steps useless.

How can I resolve this?