Question

I’m using a very simple jQuery live preview method which works brilliantly. But how do I have multiple input without having to duplicate the live preview codes for each input?

What I currently have:

$(function() {
    $(".input-1").keyup(function() {
        var word=$(this).val();
        $(".code-1").html(word);
        return false;
    });
});

<div class="wrapper">
    <form class="comments">
        <label for="input-1">Content:</label><input name="input-1" id="input-1"></input>
    </form>
    <h3>Codes:</h3>
    <code><pre>&lt;h2&gt;<span class="code-1"></span>&lt;/h2&gt;</pre></code>   
</div>      

What I want to achieve (up to 20 inputs):

<div class="wrapper">
    <form class="comments">
        <label for="input-1">Content:</label><input name="input-1" id="input-1"></input>
        <label for="red">Content:</label><input name="red" id="blue"></input>
        <label for="blue">Content:</label><input name="blue" id="blue"></input>
    </form>
    <h3>Codes:</h3>
    <code><pre>&lt;h2&gt;<span class="input-1"></span>&lt;/h2&gt;
    &lt;h2&gt;<span class="red"></span>&lt;/h2&gt;
    &lt;h2&gt;<span class="blue"></span>&lt;/h2&gt;
    </pre></code>   
</div>  

Answer 1

Basically you need a two things:

1. A selector to handle keyup for the elements you care about
2. A way to extract the number of the correct ID given the generic selector in 1.

There are many ways to each of these, for example the first one can be achieved using things like jQuery attribute starts with, jQuery find, while the second one is a simple string manipulating problem that can be solved with JavaScript Regular Expressions, or JavaScript String methods.

Here is just one example

  $(function() {
        // Find all inputs whose name attribute begins with 'input-'
        $("input[name^='input-']").keyup(function() {
            var word=$(this).val();

            // Split the string using the '-' delimiter, and grab the second token
            var number = $(this).attr("name").split('-')[1];

            // Select element(s) with the class name 'code-' + the number found above
            $(".code-" + number).html(word);
            return false;
        });
    });