Add text to h3/p/span through input field

Question

I hope you can help me out.

I have created as you can call it a template. Now what i want is to add text to this template through an input field.

for example:

<h3>i want to input text here</h3>
<input type="text>
<button>Add Title</button>

I got it working but not in the way i intended. I am using prompt(); If you copy the code, you will see a sample of what it must look like. But the user should be able to copy paste/type in their own text and that is not possible with prompt() because when i open another windows it also closes. So i want the option to manually input text and keep my CSS and styling.

Here is my code :

/*function go() {
      var Adv1 = document.getElementById("tekst1");
      var Adv1p1 = document.getElementById("p1");
      var Advertentie1    = Adv1.textContent += var text = document.getElementById("name").value;
      var p1              = Adv1p1.textContent
    }
    */


var Adv1 = document.getElementById("tekst1");
var Adv1p1 = document.getElementById("p1");
var adv1s1 = document.getElementById("span1");


//var Adv2 = document.getElementById("tekst2");
//var Adv2p2 = document.getElementById("p2");


//var Adv3 = document.getElementById("tekst3");
//var Adv3p3 = document.getElementById("p3");


var Connect = new XMLHttpRequest();

var Advertentie1 = Adv1.textContent += prompt("Wat is de Titel", "Voer hier uw titel in");
var p1 = Adv1p1.textContent += prompt("Url-pagina", "Voer hier uw url in");
var smalltextspan = adv1s1.textContent += prompt("description", "add your description here");

//var Advertentie2    = Adv2.textContent    +=  prompt("Wat is de Titel","Voer hier uw titel in");
//var p2              = Adv2p2.textContent  +=  prompt("Url-pagina","Voer hier uw url in");

//var Advertentie3    = Adv3.textContent    +=  prompt("Wat is de Titel","Voer hier uw titel in");
//var p3              = Adv3p3.textContent  +=  prompt("Url-pagina","Voer hier uw url in");

#input1 {
  width: 600px;
  height: 75px;
  border: solid black 1px;
  margin-top: 20px;
  padding: 0px;
}

h3 {
  padding: 0px;
  margin: 0px;
  font-family: arial, sans-serif;
  color: #1a0dab;
  text-align: left;
  cursor: pointer;
  font-size: 18px;
}

p {
  color: rgb(0, 102, 33);
  font-size: 14px;
  font-style: normal;
  height: auto;
  width: auto;
  text-align: left;
  display: block;
  font-weight: 400px;
  line-height: 16px;
  padding: 0px;
  margin: 0px;
  font-family: arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.text {
  color: rgb(84, 84, 84);
  font-size: 13px;
  font-family: arial, sans-serif;
  text-align: left;
  word-wrap: break-word;
  font-weight: 400;
  line-height: 18.2px;
  display: inline;
  margin: 0px;
  padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="inputWrapper">


  <!-- max 160 characters in description -->
  <div id="input1">
    <h3>Create dynamic display ads - AdWords Help - Google Support </h3>
    <p>https://support.google.com/adwords/answer/3265299?hl=en </p>
    <span class="text">This article only applies to the previous AdWords experience.
            Determine ... For the greatest reach, create responsive dynamic display ads.
            Responsive ads can ..</span>
  </div>

  <div id="input1">
    <h3 id="tekst1"></h3>
    <p id="p1"></p>
    <span id="span1" class="text"></span>
  </div>

  <!--Name: <input id="name" type="text">
        <button onclick="go()">Go</button>
        -->

  <div id="input1">
    <h3 id="tekst2"></h3>
    <p id="p2"></p>
    <span id="span2" class="text"></span>
  </div>


  <div id="input1">
    <h3 id="tekst3"></h3>
    <p id="p3"></p>
    <span id="span3" class="text"></span>
  </div>

</div>

Answer 1

@arya ag solved the problem, thank you! :)

if I undrestood correctly, I made this fiddle for you ,if I am wrong please tell me more details and clearify what are you suppose to do

 <label for="title">title</label>
<input id="title"/>
<br>
<label for="description">description</label>
<input id="description"/>


<h3 id="title-replace">
replace me please
</h3>

<h3 id="description_rep">
replace me please
</h3>
and jquery code:

$("#title").on('change input',function(){
$('#title-replace').html($(this).val());
})

$("#description").on('change input',function(){
$('#description_rep').html($(this).val());
})
the css:

label[for="title"]{
  color:red;
}
#title-replace{
  color:green;
}

Answer 2

if I undrestood correctly, I made this fiddle for you ,if I am wrong please tell me more details and clearify what are you suppose to do

    <label for="title">title</label>
<input id="title"/>
<br>
<label for="description">description</label>
<input id="description"/>


<h3 id="title-replace">
replace me please
</h3>

<h3 id="description_rep">
replace me please
</h3>

and jquery code:

$("#title").on('change input',function(){
$('#title-replace').html($(this).val());
})

$("#description").on('change input',function(){
$('#description_rep').html($(this).val());
})

the css:

label[for="title"]{
  color:red;
}
#title-replace{
  color:green;
}