jQuery click events not working as expected

Question

I want the user after clicking the input field, have the anchor options. Thus, I capture the click of these anchors and add the contents of that anchor into the input which was empty, white. But, the script does not work. So, where is the error? Is the logic wrong? At where? I followed the examples from the Jquery library documentation, I do not understand the error. Can you tell me where the error is?

Translation

pt-br 'Colegios' to en-us 'schools'

pt-br 'Unidades' to en-us 'locations'

pt-br 'Inscrição' to en-us 'subscription'

Actions of my script 1. If the user clicks the input type="text", anchor will be added. 2. If it clicks on that anchor, add the value of the content inside the input.

HTML

<input id="incricao" type="text" class="inscricao"/>
<input id="colegios" type="text" class="colegios"/>
<input id="unidades" type="text" class="unidades" />

Javascript/Jquery

$().ready(function(e) {

    $('#input').click(function(){
        $('.inscricao').append('<a href="#" id="presencial" target="_blank" rel="noopener noreferrer">Presencial</a><a href="#"  target="_blank" id="online" rel="noopener noreferrer">Online</a>');
    })

    $('#colegios').click(function(){
        $('.colegios').prepend('<a href="#" id="cdfmaster" target="_blank" rel="noopener noreferrer">CDF Master</a><a href="#" id="meninojesus" target="_blank" rel="noopener noreferrer">Menino Jesus</a><a href="#" id="ethos" target="_blank" rel="noopener noreferrer">Ethos</a>');
    })


    $('#unidades').click(function(){
        $('.unidades').prepend('<a href="#" id="recife" target="_blank" rel="noopener noreferrer">Recife</a><a href="#" id="jabatao" target="_blank" rel="noopener noreferrer">Jabatão</a>');
    })

   $("#presencial").click(function() {
       var valorDoInput0 = $(".inscricao").text();    
    $("#inscricao").val(valorDoInput0);
   });

   $("#online").click(function() {
     var valorDoInput1 = $(".inscricao").text();    
    $("#inscricao").val(valorDoInput1);
    });

   $("#cdfmaster").click(function() {
      var valorDoInput2 = $(".colegios").text();    
    $("#colegios").val(valorDoInput2);

    });

    $("#meninojesus").click(function() {
     var valorDoInput3 = $(".colegios").text();    
    $("#colegios").val(valorDoInput3);
    });

    $("#ethos").click(function() {
     var valorDoInput4 = $(".colegios").text();    
    $("#colegios").val(valorDoInput4);
    });


    $("#recife").click(function() {
        var valorDoInput5 = $(".unidades").text();    
       $("#unidades").val(valorDoInput5);
    });


    $("#jabatao").click(function() {
     var valorDoInput6 = $(".unidades").text();    
    $("#unidades").val(valorDoInput6);
    });

});

Answer 1

First of all, you can't append anything inside an input tag, try using after instead of append .

Also $('#input') is wrong and you don't have any input id! try changing it to $('#incricao') .

And finally, why you use both class and id to select your inputs? remove those classes and just use ids and select your inputs like $('#ID')