JSFiddle - React, Tailwind, and code Playground

by jrm2k6

HTML

<div id="pattern_list">
<label for="id_form-0-from_word">From word:</label>
<input name="form-0-from_word" id="id_form-0-from_word" type="text">
<label for="id_form-0-to_word">To word:</label>
<input name="form-0-to_word" id="id_form-0-to_word" type="text">

<span id="add_pattern"><a href="#">+add word</a></span><br>
</div>

JavaScript

$(function() {
    $('#add_pattern').click(function() {
        var nameLastInput = $('#pattern_list').find('input:last').attr('id');
        var numberOfInputs = parseInt(nameLastInput.split('-', 3)[1]) + 1;
        var toWord = 'id_form-' + numberOfInputs + '-to_word';
        var fromWord = 'id_form-' + numberOfInputs + '-from_word';
        var aFromWord = fromWord.split('_')[1] + '_' + fromWord.split('_')[2];
        var aToWord = toWord.split('_')[1] + '_' + toWord.split('_')[2];
        $("<input/>", {
            id: fromWord,
            type: 'text',
            name: aFromWord
        }).appendTo($('#pattern_list'));
        $("<input/>", {
            id: toWord,
            type: 'text',
            name: aToWord
        }).appendTo($('#pattern_list'));
        $('#add_pattern').appendTo($('#pattern_list')).hide().fadeIn('slow');
        $('#pattern_list').append("<br />");
    });
    return false;
});