highlight item in list generated by input text

Question

I have two lists that look like below.

Name:

1. sm frost
2. gm frost

Email:

1. smf@yahoo.com
2. gmf@gmail.com

The two lists are dynamically generated by two input forms. I am trying to highlight item in list. For example, I need to highlight Name 1 and Email 1 at the same time. I have tried to use hover function and highlight css style but no success.

Following is the code in

http://jsfiddle.net/sanm/ycsdd04s/3/

Html code:

   Bidders:<br> 
   <br>   
   Name: <input type="text" id="name" class="input" placeholder="Type Name of Bidder" > <br> 
   <br>    
   Email: <input type="email" id="email" class="input" placeholder="example@example.com">   
   <br>
   <br> 
   <input type='button' onclick='changeText2()'   value='Add'/> 
   <br>
   <br>    
   <br>    


    Bidders: <br>    

    <p> Name: </p>

    <ol id="demo"> 
    </ol>

    <p> Email: </p>
    <ol id="demo1">
    </ol>      

JavaScript Code:

    function changeText2(){
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;    
    var node1=document.createElement("LI");
    var node2=document.createElement("LI");    
    var textnode=document.createTextNode(name);  
    var textnode1=document.createTextNode(email);      
    node1.appendChild(textnode);
    node2.appendChild(textnode1);    
    document.getElementById("demo").appendChild(node1);  
    document.getElementById("demo1").appendChild(node2);     
    }

I would really thankful to you for your help.

Answer 1

Using JQuery

function changeText2(){
    var name = $('<li>'+$('#name').val()+'</li>');
    var email = $('<li>'+$('#email').val()+'</li>'); 

    $('#demo').append(name);    
    $('#demo1').append(email);

    name.click(function() {
        $('.highlight').removeClass('highlight');
        name.addClass('highlight');
        email.addClass('highlight');
    });

    email.click(function() {
        $('.highlight').removeClass('highlight');
        name.addClass('highlight');
        email.addClass('highlight');
    });
 }

JSFiddle using click

• As in above example

http://jsfiddle.net/ycsdd04s/6/

JSFiddle using hover

• (change click to hover)

http://jsfiddle.net/ycsdd04s/5/

Answer 2

There are a lot of changes you need to do to your structure, in order to:

1. Keep the tags semantic.
2. Effectively use the functions of jQuery.

So I have created two fiddles, see below, for the two events:

1. Hover
2. Click

Does this work? Let me know in comments if there's any issue.

Hover

var count = 0;
function changeText2() {
  count++;
  var name = $('#name').val();
  var email = $('#email').val();    
  $("#names").append('<li data-n="' + count + '" class="n' + count + '">' + name + '</li>');
  $("#emails").append('<li data-n="' + count + '" class="n' + count + '">' + email + '</li>');
}

$("#names, #emails").on("mouseover", "li", function () {
  $(".n" + $(this).data("n")).addClass("active");
});
$("#names, #emails").on("mouseout", "li", function () {
  $(".n" + $(this).data("n")).removeClass("active");
});

* {font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0;}
h3 {margin: 15px 0;}
label {display: block;}
label strong {font-weight: normal; display: inline-block; width: 75px; text-align: right; margin-right: 5px;}
.btn {padding: 2px 5px; margin: 10px 10px 10px 85px;}
ol li {margin-left: 2em;}
ol li:hover,
.active {background-color: #99f;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Add Bidder</h3>
<label>
  <strong>Name:</strong>
  <input type="text" id="name" class="input" placeholder="Type Name of Bidder" />
</label>
<label>
  <strong>Email:</strong>
  <input type="email" id="email" class="input" placeholder="example@example.com" />
</label>
<input type="button" onclick="changeText2()" value="Add" class="btn" />

<h3>Bidders</h3>
<h4>Names</h4>
<ol id="names"></ol>
<h4>Emails</h4>
<ol id="emails"></ol>

Click

var count = 0;
function changeText2() {
  count++;
  var name = $('#name').val();
  var email = $('#email').val();    
  $("#names").append('<li data-n="' + count + '" class="n' + count + '">' + name + '</li>');
  $("#emails").append('<li data-n="' + count + '" class="n' + count + '">' + email + '</li>');
}

$("#names, #emails").on("click", "li", function () {
  $(".n" + $(this).data("n")).toggleClass("active");
});

* {font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0;}
h3 {margin: 15px 0;}
label {display: block;}
label strong {font-weight: normal; display: inline-block; width: 75px; text-align: right; margin-right: 5px;}
.btn {padding: 2px 5px; margin: 10px 10px 10px 85px;}
ol li {margin-left: 2em;}
.active {background-color: #99f;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Add Bidder</h3>
<label>
  <strong>Name:</strong>
  <input type="text" id="name" class="input" placeholder="Type Name of Bidder" />
</label>
<label>
  <strong>Email:</strong>
  <input type="email" id="email" class="input" placeholder="example@example.com" />
</label>
<input type="button" onclick="changeText2()" value="Add" class="btn" />

<h3>Bidders</h3>
<h4>Names</h4>
<ol id="names"></ol>
<h4>Emails</h4>
<ol id="emails"></ol>