JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div id='content'>
        <div class="2dtme">	<span id='title' class="help-block">Line 1</span>

            <div class='me'>
                <input type="checkbox" name="ck_2DM_line_1" id="ck_2DM_line_1" class="span1" style="margin-top:10px" />
                <input type="hidden" name="2DM_disc" id="2DM_disc" value="28" />
                <input name="2DM[1][]" id="2DM[8][]" class="span1 x" type="text" disabled="disabled" style="width:30px" value="X" />
                <input name="2DM[1][]" id="2DM[8][]" class="span1 first" type="text" maxlength="1" data-id='ratusan3' disabled pattern="[0-9]{1,1}" style="width:30px" onKeyUp="$(this).val($(this).val().replace(/[^\d]/ig, ''))" required />
                <input name="2DM[1][]" id="2DM[8][]" class="span1 next" type="text" maxlength="1" disabled data-id='puluhan3' pattern="[0-9]{1,1}" style="width:30px" onKeyUp="$(this).val($(this).val().replace(/[^\d]/ig, ''))" required />
                <input name="2DM[1][]" id="2DM[8][]" class="span1 " type="text" disabled="disabled" style="width:30px" value="X" />
                <!--<div class="input-append" style="margin-left:20px">-->
                <input name="2DM[1][]" disabled class="span4 next" id="2DM[8][]" type="number" style="width:350px" required min="1000" step="1000" onKeyUp="$(this).val($(this).val().replace(/[^\d]/ig, ''))" />
            </div>
        </div>
        <div class="2dtme">	<span id='title' class="help-block">Line 2</span>

            <div class='me'>
                <input type="checkbox" name="ck_2DM_line_1" id="ck_2DM_line_1" class="span1" style="margin-top:10px" />
                <input type="hidden" name="2DM_disc" id="2DM_disc" value="28" />
                <input name="2DM[2][]" id="2DM[9][]" class="span1 x" type="text" disabled="disabled" style="width:30px" value="X" />
                <input name="2DM[2][]" id="2DM[9][]" class="span1 first" type="text" maxlength="1" data-id='ratusan3' disabled pattern="[0-9]{1,1}"...

JavaScript

$(document).ready(function () {
	    $('.addrow').click(function () {
	        var n = $("#content>div").length;
	        var new_n = n + 1;
	        var new_line = $('#content div.2dtme:last').clone().append();
	        $("input[name='2DM[" + n + "][]']", new_line).attr("name", "2DM[" + new_n + "][]");
	        $("span#title", new_line).text("Line bet " + new_n + " ");
	        new_line.appendTo('#content');
	    });
	    $("input").keyup(function (event) {
	        console.log('keyupinput');
	        if ($(this).val() != "") {
	            console.log($(this).val());
	            $(this).next('input').focus();
	            $(this).parent('td').next('td').find('input').focus();
	            if ($(this).next('input[type="text"]').val() == "X") {
	                $(this).closest('td').next('input').focus();
	                $(this).closest('.me').find('input').focus();

	            }
	        }
	    });

	    $('form').on('change', 'input[type=checkbox]', function (e) {

	        var checkbox = $(this);
	        /*
	         * If any checkbox is checked, find the nearest textbox and enabled user to key in number
	         * If textbox contains value "X", keep that X textbox disabled
             * 
	         */
	        if (checkbox.prop('checked')) {
	            checkbox.closest('.me').find('input[type=text]').prop('disabled', !checkbox.is(':checked'));
	            checkbox.closest('.me').find('input[type=number]').prop('disabled', !checkbox.is(':checked'));
	            checkbox.closest('.me').find("input[value='X']").attr("disabled", "disabled");
	            checkbox.closest('.me').find('input[type=text].first').focus();
	        
	           
	        } else {
	            checkbox.closest('.me').find("input[value='X']").attr("disabled", "disabled");
	            checkbox.closest('.me').find('input[type=text]').val('');
	            checkbox.closest('.me').find('input[type=number]').val('');
	           ...